Why is website design so awful today, generally?

[Tozovac]

Aha.

Lots of unused white space? ✅

Removal of any color strip at the top, now looking like any other windows 10 window, blending in with all the rest of the monochromatic lemmings-designed similar moderN interfaces, increasing the difficulty to quickly identify different windows on the screen? ✅

Removal of frequently used information that will require more clicks to access? ✅

Replacing multi-colored icons with very similar looking icons that take more work to quickly distinguish? ✅

Elimination of different colored zones, that used to subconsciously help organize actions and define context, Replaced with more light gray and white overall? ✅

Good job Facebook, another unnecessary plastic surgery “improvement” to do not much more than make things look different.

Same questions I asked after iOS7 debuted and after OSX went to the "Fisher Price My First OSX" look: Can anyone list any egregious design mistakes that were causing confusion and unhappiness? How do the new changes here fix the design mistakes, how are they better, and do they not introduce any new issues (unintended consequences).

 

[Tozovac]

Adam Carolla’s said it often, put a beaver on top of the Empire State Building and it’ll try to build a dam.

Put a designer behind a monitor and it’ll want to dabble and design and be heard (seen).

So here we are with every site and app trending towards looking dismally drabfully flat alike, with little to no regard of taking advantage of the type of physical interface being used (mobile vs. desktop/laptop).

Anyone want to get in on a poll to guess what year the dam will break and some genius designer at one of the big 3 (Apple, Google, Facebook) will revolutionarily “modernize” and freshen things up with a multi-colored, more intuitive, "more info on the screen at the ready" appearance?

Second poll, who will be the first of those 3?

 

[Tarian]

I sense some tongue-in-cheek along with valid complaints. What’s maybe funny is, if Lidl or the company making the packaging were to say that an all-white box produces a noticeable reduction in waste or resource utilization as trade-off for reducing the decoration on boxes that are eventually discarded, I could see a valid point to justify any reduced legibility or ease for shoppers.

>edited<

Unlike the high-volume packaging at Lidl, I don’t think I could extend a resource-saving courtesy to the Starbucks menus, similar to how no ink or resources are being conserved by white-washing apps to look so bland and unfinished. It’s all about style and not substance, form not function.

The points I was making about Lidl's minimalist "Simply" range are:
a) If it's the ONLY white packaging amongst a sea of coloured (but often familiar) packaging, it can be identified.
e.g. spotting the familiar turquoise of Heinz Baked Beans or a distinctive pack of Kellogs Cornflakes ... the contents of a plain white package alongside can be guessed with confidence.

But when that plain white package is the ONLY one on an empty shelf .....
... or going back to the mostly white, minimalist website, with negligible colour or detailing ...... that "guesswork" is too much.

b) Lidl's "Simply" range is their bargain range.
Nothing wrong with that.
Presumably Lidl sees no need to pay for skilled designers carefully positioning pictures with a mix of factual and "buy me" text and agonising over colouring.

So Minimalism looks "cheap" ..... lazy and disrespectul to the Customer or User.

Why website owners think "cleaner and simpler" helps Visitors is beyond me.

 

[Tarian]

Here are the "old" and "new" designs at the London Stock Exchange for a Company's share price and basic data
All at 80% zoom.

Current ("old") site :> Plenty of info. and visible navigation.
(Note the brown panel link to new, "cleaner" design. Screenshots further down)

ROLLS-ROYCE HLG share price (RR.) - London Stock Exchange

ROLLS-ROYCE HLG share price (RR.), chart, recent trades, company information, trading information, company news, fundamentals.

www.londonstockexchange.com

Updateable text (share prices etc) is not quite black - but is readable - helped by alternate pale blue shading and vertical column segments.

Just one page down, recent trades and historic data - also with alternate, pale blue shading and column segments.

Now the supposed "upgrade". Also at 80% zoom.

Issuer Services | London Stock Exchange

profile.lsegissuerservices.com

Top Nav. Bar text is pale grey or pale turqoise and barely readable - with no borders to help aim. And fewer links
An oversized and useless panel for "Rolls Royce".
Empty white space. Clearly designed for mobile twitters.

On a tablet, the jumbled text (prices etc) is OK - but suggests a lack of concern about Desktop Users.


Scroll down just one page .... to a chart with pale grey and barely readable anything.
Perhaps scroll back up this post and compare with the visibly usable "old" chart they plan to scrap.

And scroll another "page". This view shows the "Last 5 Trades".
Compared with the "old" version, the new table has no vertical or horizontal shading to help the User.
The "new" lacks the "old's" functionality. Missing are buttons for "Refresh" and "More". (i.e. viewing more Trades, e.g. 10, 50, All)

AND ... there are 2 more pages down..... with nothing but a couple of article summaries squeezed into a VERY narrow column ...
....to the usual bottom panel of "small print" stuff.
Even here, the designer "minimalises" unhelpfully.
The new bottom panel has only 5 links (looking like plain text) ... using 2 for the hugely "popular" "Modern Slavery Act" and "UK Bribery Act".
The "old" bottom panel has over 35 links.
Am I the only one to think many (e.g. International, Portfolio, Events) could generate more clicks ?

Does anyone think that the new "cleaner", scrolly, white with grey text and lack of borders/shading version is an improvement ?

 

[Tozovac]

Does anyone think that the new "cleaner", scrolly, white with grey text and lack of borders/shading version is an improvement ?

Exactly. Real questions: Is it an improvement functionally? If it is, then what about the prior way was troublesome, and how exactly does the new way fix it?

It's awfully easy to list issues with the "new" flat/white/spread-out methods and how the prior/older way worked better.

These changes are mostly to look different and scratch an urge to bring out something fresh. They are nods to human nature's urge to constantly improve something. But when something works awfully well, the only option left is to rearrange the furniture under the guise of "improvement."

We're stuck with this for now. Much of Microsoft Windows 10 and anything they've done after the Metro/Windows Phone debacle still remains. Backstage in Microsoft Office is full of so many bass-ackwards ways of doing things...requiring more steps to do what used to take fewer, making things look too vaguely alike across applications, and wasting an awful lot of screen space, all resulting in less productivity.

Check out this article, many of which exist online sharing my disdain for most everything Microsoft-related after ~2015.

Office 2013 Is Not User Friendly - Sharing my frustration at the changes (at least some of them) and feedback for the next version--soon, I hope.

I just started using Office 2013 (from 2003) a few weeks ago andI find new reasons to think Office 2013 sucks EVERY DAY. Every day I pounds my fist on my desk because some useful feature that was

answers.microsoft.com

Let's await the first design "genius" to re-embrace efficient, robust design over fashion. It'll return one day.

 

[Tarian]

What is the point of this site ?

piqu: simple, beautiful, challenging kitchen design, Orpington, Kent

Can anyone see any navigation ? Any text (apart from a thin, pale, logo) ?
It looks like an auto carousel/slider of screen-filling photos - occasionally interrupted by a one colour page of nothingness.

I think it's trying to sell kitchens ..... but where to start .......?


>.time passes<


If I hadn't kept the pages up, while writing this whinge, I wouldn't have experimented with changing the zoom.
Hey presto. Some faint words appeared top right.

Clicking them was a waste of time. just a handful of " beautiful" photos or some grey text surrounded by empty white space.
No specs, No data, No unit descriptions, No prices. Just some touchy-feely blurb about how they can plan a kitchen.

Why would anyone spend time on this site ?

 

[Tozovac]

Why would anyone spend time on this site ?

The designer would spend a lot of time on the site, admiring his/her work afterwards. That’s a major issue now: sites/apps designed for the designer’s ego and portfolio first and not for the userS. After app/web design reached a point of things working really well, all that was left to ”take it to the next level” was to tinker with a bunch of mostly unnecessary plastic surgery.

 

[Tozovac]

What a beauty of a page, Apple. Who's designing these, 2nd graders? Are 4.5 screen-views (on my 13" MBA) really considered to be good design, whether responsive or not? And by whom?

Apple Store Online

Shop the latest Apple products, accessories and offers. Compare models, get expert shopping help, plus flexible payment and delivery options.

www.apple.com

 

[Tarian]

Here is a website that (probably) most web-design bloggers would dismiss as "old-fashioned" - yet to me is easy on the eye and inviting.

http://www.hoistfencing.co.uk/index.php

- The company name and phone number is "raised" and highlighted.

- Navigation is mostly very clear - i.e. distinct from passive text, with borders or underlines.

- The "hero image" isn't screen-filling. (although it does have auto-carousel which many find irritating)

- Content is not squeezed into a single column

- Panels with different functions are distinguished by background colour

- The main centre panel contains a good amount of information (without being overly dense) - instead of a pithy one-line mission statement that only insiders "get".

- Text is (very nearly) black - and readable !!!!!

- Line-spacing is "adult" and not as in books for pre-schoolers.

- The left-side Contents panel explains what is available inside - so is inviting (both by content and ease of navigation)

- The Home page ends after just one click of "page down" ...i.e. not endless scrolling.....
.... and any other content is found easily from the left-side Contents.

Upon clicking (say) "Sheds", six styles can be viewed at once, making comparison easier - by the simple device of using small but clickable photos. (i.e. not over-sized photos that force unwanted scrolling.)


One can only hope that a web-designer doesn't succeed in "selling" a re-design !

 

[Akrapovic]

I have many problems with that site.

According to performance test, the site takes 3.8s before it begin first paint. Up to 6s for full load on average internet connections. That's shocking for such a simple site. This is largely due to the sites reliance on old fashioned JPEG images. It isn't using JPEG 2000 or PNG.

Accessibility is shockingly bad, however. Heading elements are not in the correct order, which makes it impossible for a browser to know which section is which. The login and forms don't have labels, so again, the browser has absolutely no idea what is what. Links don't have names. Images don't have proper Alt-Text. Basically, if the user uses any sort of assistive technology, such as a screen reader then this site fails the most basic of audits. It's also slowly becoming law in many places that business sites are accessible for to those requiring assistance - in fact in the UK if you're a public service, such as a council or a government funded organisation etc, then it already is law.

The irony of it is they've added the accessibility of being able to enlarge the font size on the site. But browsers can do that as part of the accessibility anyway. So this fails to observe that standard and builds its own. And it won't work correctly with the people who need to use it. Remarkable.

And here's something the accessibility audits won't pick up, but it fails on amazingly - because the phone number is an image and not text, it's completely invisible to anyone using assistive technology. It's impossible to find the contact details otherwise. You'd have to get a screen reader to dig into the paragraph text (which doesn't use the correct HTML tags) to find the phone number in a text block. Annnnnd, it ignores responsive design, which means it doesn't display correctly on a phone, and misses the obvious use of using a tel: link. This site is just badly made. I hope a web designer succeeds in selling them a site that would work with modern technology.

Ignoring the outdated visual design, I think this site is terrible. It doesn't obey any sort of standards. (And before someone says "omg standards define bad design" - no they don't. The hidden bits of a site which we don't see are important to a lot of people.

 

[cyb3rdud3]

I have many problems with that site.

According to performance test, the site takes 3.8s before it begin first paint. Up to 6s for full load on average internet connections. That's shocking for such a simple site. This is largely due to the sites reliance on old fashioned JPEG images. It isn't using JPEG 2000 or PNG.

Accessibility is shockingly bad, however. Heading elements are not in the correct order, which makes it impossible for a browser to know which section is which. The login and forms don't have labels, so again, the browser has absolutely no idea what is what. Links don't have names. Images don't have proper Alt-Text. Basically, if the user uses any sort of assistive technology, such as a screen reader then this site fails the most basic of audits. It's also slowly becoming law in many places that business sites are accessible for to those requiring assistance - in fact in the UK if you're a public service, such as a council or a government funded organisation etc, then it already is law.

The irony of it is they've added the accessibility of being able to enlarge the font size on the site. But browsers can do that as part of the accessibility anyway. So this fails to observe that standard and builds its own. And it won't work correctly with the people who need to use it. Remarkable.

And here's something the accessibility audits won't pick up, but it fails on amazingly - because the phone number is an image and not text, it's completely invisible to anyone using assistive technology. It's impossible to find the contact details otherwise. You'd have to get a screen reader to dig into the paragraph text (which doesn't use the correct HTML tags) to find the phone number in a text block. Annnnnd, it ignores responsive design, which means it doesn't display correctly on a phone, and misses the obvious use of using a tel: link. This site is just badly made. I hope a web designer succeeds in selling them a site that would work with modern technology.

Ignoring the outdated visual design, I think this site is terrible. It doesn't obey any sort of standards. (And before someone says "omg standards define bad design" - no they don't. The hidden bits of a site which we don't see are important to a lot of people.

Totally agree, and in addition to the above it is impossible to navigate when on a mobile device. It is truly awful.

 

[Akrapovic]

I think (although not sure) that is because the designer (term used loosely) has used px to define text height rather than rem/em? I can't remember exactly when those come into play?

Basically to use this you must be using a decently sized screen on a desktop browser with good eye sight. Otherwise, f**k you, we don't want your business - to the point where we'll make our phone number inaccessible to you.

 

[Tozovac]

I think (although not sure) that is because the designer (term used loosely) has used px to define text height rather than rem/em? I can't remember exactly when those come into play?

Basically to use this you must be using a decently sized screen on a desktop browser with good eye sight. Otherwise, f**k you, we don't want your business - to the point where we'll make our phone number inaccessible to you.

Wow, I don’t know...I think the site looks “old fashioned” for sure, but on the plus side, I can’t help but feel the ”instant relief” Of not having my time wasted with an unnecessarily-oversized hero image while being able to almost instantaneously recognize the “zones” of information being presented...I instantly “get” the general context of what the site is providing...the top has links to general area, the moderately-sized hero/banner images gives an intro to what the company provides, the middle is the introductory info, the right zone is for “mandatory” actions for getting something done at the site (logging in or purchasing), the left zone is “optional information,” and the instantly-recognizable login & search windows are a relief to recognize so instantly, and not have to scroll incessantly to find them behind a hamburger icon or “hidden in plain sight“ via in a highly-vertical (scroll-fiesta) site full of flat design that makes everything on the page look alike to where you have to think hard to find a “starting point.” I agree 100% with @Tarian...the plusses of this site far outweigh the negatives IMHO. NOt a perfect site, not “updated” to today’s “typical“ flat-design mobile-adaptive (sorry, forgetting the correct term) standards, but instantly “relieving” in that the site’s introductory page “makes sense” overall.

 

[Tozovac]

I have many problems with that site.

According to performance test, the site takes 3.8s before it begin first paint. Up to 6s for full load on average internet connections. That's shocking for such a simple site. This is largely due to the sites reliance on old fashioned JPEG images. It isn't using JPEG 2000 or PNG.

Accessibility is shockingly bad, however. Heading elements are not in the correct order, which makes it impossible for a browser to know which section is which. The login and forms don't have labels, so again, the browser has absolutely no idea what is what. Links don't have names. Images don't have proper Alt-Text. Basically, if the user uses any sort of assistive technology, such as a screen reader then this site fails the most basic of audits. It's also slowly becoming law in many places that business sites are accessible for to those requiring assistance - in fact in the UK if you're a public service, such as a council or a government funded organisation etc, then it already is law.

The irony of it is they've added the accessibility of being able to enlarge the font size on the site. But browsers can do that as part of the accessibility anyway. So this fails to observe that standard and builds its own. And it won't work correctly with the people who need to use it. Remarkable.

And here's something the accessibility audits won't pick up, but it fails on amazingly - because the phone number is an image and not text, it's completely invisible to anyone using assistive technology. It's impossible to find the contact details otherwise. You'd have to get a screen reader to dig into the paragraph text (which doesn't use the correct HTML tags) to find the phone number in a text block. Annnnnd, it ignores responsive design, which means it doesn't display correctly on a phone, and misses the obvious use of using a tel: link. This site is just badly made. I hope a web designer succeeds in selling them a site that would work with modern technology.

Ignoring the outdated visual design, I think this site is terrible. It doesn't obey any sort of standards. (And before someone says "omg standards define bad design" - no they don't. The hidden bits of a site which we don't see are important to a lot of people.

With all due respect, these critiques are like the difference between extreme book smarts vs. extreme street smarts. Too much strict adherence to either is very likely not the best solution.

You speak of load times… What about the time required to scroll down past unnecessarily large hero images that are way more about fashion than providing any true function, with lots of wasted space on a very vertical site just to gain some context as to what you are looking at? (See my post below re: Wix site)

Your critiques are probably 100% correct if one were to “stick by the book.” However, to me and @Tarian at least, despite the many critiques one could give this site, its “street smarts” are more than enough to efficiently get the job done and without a major fuss and over-adherence to “today’s fashion,” which arguably have their own downsides when followed too extremely. An improvement here would be to combine book smarts with street smarts, where the accessibility boxes are checked but the site isn’t hamstrung with an oversize hero image on a page that’s 10-screens high vertically with light grey font on white and input/entry boxes either hidden in plain sight via flat design and/or hidden behind a hamburger, gear, magnifying glass, or ellipsis icon such that it takes 2 or 3 taps to enter text instead of just one tap.

 

[Tozovac]

Ugh....I see now where so much of this website design poison emanates....

When viewed on an iPad, what a space-wasting inefficient scroll-heavy designer’s-ego-indulging webpage for a business that helps create web pages.

The Leader in Website Creation | Create Your Free Website | Wix.com

Make your vision come to life with Wix. Choose a template you love and customize anything with the most innovative drag and drop website builder. Create a website for your business, portfolio, online store or blog today.

www.wix.com

 

[Tarian]

I have many problems with that site.

According to performance test, the site takes 3.8s before it begin first paint. Up to 6s for full load on average internet connections. That's shocking for such a simple site.

"3.8 seconds" . Did you mean milliseconds ?
My PC cost me £350 and Hoist fencing appears instantly.

I have many problems with that site.

Accessibility is shockingly bad, however.
Heading elements are not in the correct order, which makes it impossible for a browser to know which section is which.

"Accessibility is shockingly bad " ???
...When web-designers stop using unreadable grey text - indistinct navigation - and endless scrolling sites with minimal content in view....
.... then the rest of us might listen !

What, in your opinion is the "correct order" ?
Personally, I have no problem with the olive top Menu links being above the Hoist Fencing name and number panel.

Put "Hoist Fencing" in Search - and several of its pages are listed - Index, Contact Us, Fence Panels, Find Us.....
....so what is meant by "impossible for a browser to know which section is which" ?

I have many problems with that site.

The login and forms don't have labels, so again, the browser has absolutely no idea what is what. Links don't have names. Images don't have proper Alt-Text.

What do you mean "no labels" ?? The Login button clearly says "Login".
Links have very clear names - at the top Menu and the left Contents.

More importantly, links are distinguished by border or underline ..... unlike most "modern", minimalist "clean" designs.

And why would a browser have to "have an idea what is what" ?
Surely making things clear to the Visitor (as the Hoist site does) is what counts ?

And why is Alt-Text "proper" - or necessary ?
It only seems to allow pictures to be included in Search results ....which if one is selling items clearly described as "Sheds" or "Fences" seems a tad redundant !

I have many problems with that site.

Basically, if the user uses any sort of assistive technology, such as a screen reader then this site fails the most basic of audits. It's also slowly becoming law in many places that business sites are accessible for to those requiring assistance - in fact in the UK if you're a public service, such as a council or a government funded organisation etc, then it already is law.

How does this site fail an "audit" for a screen reader ?

As for making such things "law", that seems ridiculous. (There seems to be "Guidance" to Govt. Departments ....but does it mandate making navigation harder ??.)
If a Shed-seller misses out on a shed sale to a blind person, surely that is the Shed-seller's problem ?

I have many problems with that site.

The irony of it is they've added the accessibility of being able to enlarge the font size on the site. But browsers can do that as part of the accessibility anyway. So this fails to observe that standard and builds its own. And it won't work correctly with the people who need to use it. Remarkable.

It's interesting that you mention "enlarging the font size".
Too many sites have re-designed with larger text - which some Users reduce - to see more Content.
(e.g. Most of my open web-pages are at 80%)

How do you know it "won't work correctly" ?

I have many problems with that site.

And here's something the accessibility audits won't pick up, but it fails on amazingly - because the phone number is an image and not text, it's completely invisible to anyone using assistive technology. It's impossible to find the contact details otherwise.
You'd have to get a screen reader to dig into the paragraph text (which doesn't use the correct HTML tags) to find the phone number in a text block.

Good point - about the phone number......
.....until one searches for "Hoist Fencing phone number".
What comes up ?
The Contact page - with the phone number middle and top above the Email form.
Yes, the number could be larger - but does a Screen Reader care about font size ???

I have many problems with that site.

Annnnnd, it ignores responsive design, which means it doesn't display correctly on a phone, and misses the obvious use of using a tel: link. This site is just badly made. I hope a web designer succeeds in selling them a site that would work with modern technology.

"doesn't display correctly" ?
Hoist Fencing looks fine on my wife's tablet. i.e exactly as it does on the Desktop.
i.e. fully functional - everything visible.
And pinch to zoom works if I want to use it (unlike many "mobile first" sites)
So what is not "correct" ?

Most "Responsive is implemented wrongly ...... or web-designers are lying when they say "Responsive detects the device" .... when mostly it doesn't.

Instead it detects the window size or viewport.
i.e. any attempt to resize the browser (e.g. to compare alongside a document or other webpage) ... and the page content shuffles around, disorientating the User.

I have many problems with that site.

This site is just badly made. I hope a web designer succeeds in selling them a site that would work with modern technology.

"Badly made" ?
In your opinion .... apparently based on some arcane tech points which don't seem to address the interface and usability.

According to one web-design site (which draws some "fashionable" conclusions from its data) says:
"85% of adults think that a company’s website when viewed on a mobile device should be as good or better than its desktop website."

So what do you mean "modern technology".
If you mean mobiles .... then that is nub of the problem.
Mobile sites are almost always dumbed-down versions of desktop sites .... which is NOT what "85% of adults" want.

Hoist works on mobile (which it does) ... and it retains clear and distinct navigation (which it does)....
So I fervently hope that no-one succeeds in "selling them a site that would work with modern technology" ....
...as it seems likely to make Hoist's site worse,
i.e. less appealing, less easy to navigate, more work..

I have many problems with that site.

Ignoring the outdated visual design, I think this site is terrible. It doesn't obey any sort of standards. (And before someone says "omg standards define bad design" - no they don't. The hidden bits of a site which we don't see are important to a lot of people.

"Outdated visual design".

The other nub of the problem - Designers telling the rest of us what we should like.

The Architecture Department of a College asked all of its students which of 10 buildings they liked.
The non-Architects (95% of Students) overwhelmingly preferred traditional styles including brick, stone and pitched roofs.
The non-Architects disliked industrial steel and glass - typically grey, minimalist, brutalist or just "way out".

Unsurprisingly, the 5% of Architect Students fawned over each other's architectural "statements" - while dismissing the "unadventurous" or "unsophisticated" masses !

 

[Akrapovic]

This is going to be a hard post to quote, but I'll try. Sorry if I break the formatting.

"3.8 seconds" . Did you mean milliseconds ?
My PC cost me £350 and Hoist fencing appears instantly.

3.8 second. I used standard development and QA tools to get the average rendering time. It isn't about your PC. It's about the average speed that the site is served. This one fails quite badly in a lot of places.

What, in your opinion is the "correct order" ?
Personally, I have no problem with the olive top Menu links being above the Hoist Fencing name and number panel.

Put "Hoist Fencing" in Search - and several of its pages are listed - Index, Contact Us, Fence Panels, Find Us.....
....so what is meant by "impossible for a browser to know which section is which" ?

The correct order is

H1
-H2
--H3
---H4
----H5
-----H6

This is not negotiable. It is a tech standard. This standard is not followed. Frankly, this renders correctly in browsers despite the incompetence of the developer. When it comes to assistive technology, it will fail as the browser is unable to determine which headers are the most important.

Whilst we are here, the structure of how this site is built is also terrible. DIVs with the ID header? Why is it not using the <header> tag? Same with footer, nav etc? This site uses DIVs for everything. Which violates the first rule of accessibility - only use a DIV When there is no other appropriate tag. This developer uses a DIV for everything, regardless of how appropriate it is.

What do you mean "no labels" ?? The Login button clearly says "Login".
Links have very clear names - at the top Menu and the left Contents.

The <input> tags don't have labels. In fact, the "email" text above the email box isn't even in a damn tag at all. It's just free-floating text. So not only can screen readers not read it correctly, it also won't obey correct text resizing. And to add insult to injury, some browsers may fail to auto-fill user names and passwords in it, because it fails to follow basic web standards. The fact the email text isn't even in a tag is mind blowing.

And why would a browser have to "have an idea what is what" ?
Surely making things clear to the Visitor (as the Hoist site does) is what counts ?

How do you think browsers know how to display links, and boxes? How do you think assistive technology knows what to read? It has to be told these things. This site doesn't bother doing that. It just has the very basics of a website in there and hopes the browsers can make sense of it. Which it mostly does (and that's credit to the browser, not the web developer), but as I said, it fails on a lot of things.

And why is Alt-Text "proper" - or necessary ?

So screen readers, search engines and low bandwidth connections know what the image is. This site won't index on search results as well as it should. It won't describe images for assistive technology. It will load blank squares on low bandwidth connections.

How does this site fail an "audit" for a screen reader ?

Most browsers have them built into the developer tools, but there are additional bits of software you can use which will read the sites code and list all the issues with it.

As for making such things "law", that seems ridiculous. (There seems to be "Guidance" to Govt. Departments ....but does it mandate making navigation harder ??.)
If a Shed-seller misses out on a shed sale to a blind person, surely that is the Shed-seller's problem ?

This, I 100% disagree with, and thankfully the majority of world organisations do too. In the UK (and the EU), disabled people have rights to not be discriminated against. This means that businesses must do everything they reasonably can to accommodate people with disabilities. This is why you see brail on lifts, and ramps outside hotels etc. Exceptions are made for things which are not reasonable - you can't expect wheel chair access to the top of an old castle for example. However, it is absolutely reasonable to expect websites to use the correct tags in the code to assist people. Especially since it isn't hard - it's a basic level of competence a web developer must have.

Supreme Court hands victory to blind man who sued Domino's over site accessibility

The Supreme Court denied a petition from pizza giant Domino's on Monday to hear whether its website is required to be accessible to the disabled, a loss for the company.

www.cnbc.com

Blind people can't buy pizza, according to Dominos. Thankfully the supreme court in the US decided they were entitled to the same thing as sighted people were. If everyone built sites like old shed man here, those requiring screen readers would be locked out of the internet.

It's interesting that you mention "enlarging the font size".
Too many sites have re-designed with larger text - which some Users reduce - to see more Content.
(e.g. Most of my open web-pages are at 80%)

How do you know it "won't work correctly" ?

I know it won't work correctly because it uses px to define the height of the text, rather than the correct standard which is em/rem. Using em/rem allows the font size to be set by the browser (which is an assistive technology built into every browser). This means if you prefer larger text, you enlarge the text in the browser (not the zoom function, btw) and it enlarges on every site. Or rather, every site that follows standards.

What you get on this Shed site is the developer saying "nah, we don't believe our site should follow this standard which means it just works. We believe that the people who need the text larger should have to do it manually every time they load this site". So this site ignores any settings you've setup and decides it's far more important. So important, you'll need to do it every time.

Also, to add insult to injury, the font + and - buttons aren't buttons. They're images. So once again, any sort of assistive technology sees those as images and not buttons. Could've made those buttons, but instead they've chosen images and then called the images buttons. At this point it's more like the developer is trolling rather than being incompetent.

Good point - about the phone number......
.....until one searches for "Hoist Fencing phone number".
What comes up ?
The Contact page - with the phone number middle and top above the Email form.
Yes, the number could be larger - but does a Screen Reader care about font size ???

So let me get this right. One of the big arguments that keeps coming up in this thread is information should be accessible on the main screen and you should have less steps and scrolling to find what you want. And now we're excusing some appalling development choices by saying "if you do these extra steps, you get the same info"? I mean really?

The size of the number isn't the problem. The fact it's an image is the problem. Why is it not text? We can do shadows and outlines like that phone number with CSS you know.

I've given up at this point because I think I made my point.

This site is extremely badly made. Regardless of how it looks, it's a disgrace underneath and doesn't bother following any sort of standards. You could rebuild that site and have it look *EXACTLY* the same as it does now, but actually be a good site underneath. You can argue you like the looks of it. But you can't argue it's well made. It isn't.

5/10 for appearance
1/10 for code base
0/10 for future proofing

 

[Tozovac]

Ugh....I see now where so much of this website design poison emanates....

When viewed on an iPad, what a space-wasting inefficient scroll-heavy designer’s-ego-indulging webpage for a business that helps create web pages.

The Leader in Website Creation | Create Your Free Website | Wix.com

Make your vision come to life with Wix. Choose a template you love and customize anything with the most innovative drag and drop website builder. Create a website for your business, portfolio, online store or blog today.

www.wix.com

BTW, this site created by the “experts” in site design from Wix reminds me of a point I’ve not brought up to date nor do I recall anyone else mentioning it.

When viewed on an iPad, the link above is so extremely (and unnecessarily) vertical from being filled with so much inefficient unused space (whose only function is to accomodate the unnecessarily oversized hero background image) that multiple “Start here” buttons are required. In this page it’s not as bad as some since the start here buttons are labeled the same and there’s not much other competing content on the page, but I find that seeing multiple buttons for the same function to be confusing at times, causing uncertainty as to whether I’m starting at the right or best point to get the job done that I intended. I’ll try to find ones that cause real confusion to me at least, where the buttons spread far out on an extremely-vertical page are sometimes labeled differently but lead to the same next page.

 

[cyb3rdud3]

BTW, this site created by the “experts” in site design from Wix reminds me of a point I’ve not brought up to date nor do I recall anyone else mentioning it.

When viewed on an iPad, the link above is so extremely (and unnecessarily) vertical from being filled with so much inefficient unused space (whose only function is to accomodate the unnecessarily oversized hero background image) that multiple “Start here” buttons are required. In this page it’s not as bad as some since the start here buttons are labeled the same and there’s not much other competing content on the page, but I find that seeing multiple buttons for the same function to be confusing at times, causing uncertainty as to whether I’m starting at the right or best point to get the job done that I intended. I’ll try to find ones that cause real confusion to me at least, where the buttons spread far out on an extremely-vertical page are sometimes labeled differently but lead to the same next page.

It is a call to action, they lead to the same place, and prevent the user from having to take additional action and go somewhere else to do the same thing. Knowing wix I'm sure they'll have done a/b testing as to what works best for their new online acquisitions.

 

[Akrapovic]

Oh god, lets not start talking about a/b testing. When we brought up stats and bounce rates and all that stuff before, all of the industry is wrong and doesn't do real work. Introducing a/b testing into the discussion just lets experts be even more wrong about what works.

 

[Tozovac]

You can argue you like the looks of it. But you can't argue it's well made. It isn't.

I personally didn’t read in any of his posts that he “likes” it. Rather, much like my feelings on the matter, I sense he is acknowledging that it’s easier than some “modernized sites that meet all required standards” such that he can quickly understand the page’s intent & offerings without having to first look way down then back up again to gain context of what’s being provided.

It is a call to action, they lead to the same place, and prevent the user from having to take additional action and go somewhere else to do the same thing. Knowing wix I'm sure they'll have done a/b testing as to what works best for their new online acquisitions.

Ok multiple buttons on a rather large page lead to the same next page.

Let’s look at the broader picture. When that site is viewed on an ipad, what’s the functional benefit of spreading things out so “tall” with large font and lots of empty space that the layout lends things to needing duplicate buttons that lead to the same next step?

Or, what functional principle would be violated if Wix created an intro page that fit on one ipad/desktop page (and maybe 2 mobile phone screen-heights), got the same messages across and without an overly-large scroll-heavy image, and with one “Start here” button?

The only answer I could possibly predict is: Most lemming users/designers would consider such a simple page that didn’t follow currently-conventional “norms” of spreading things out and including large artsy images to be unacceptable...an indication that Wix’s offerings are “cheap” and lazy and ”not with the times” that everyone else is following.

 

[Tarian]

Totally agree, and in addition to the above it is impossible to navigate when on a mobile device.
It is truly awful.

"impossible to navigate" ?
What are you trying to do - and how ?
(.....and why "awful" ?)

I've just loaded Hoist onto my wife's Samsung / Android tablet.
Everything works fine ... (even with my zombie fingers...)

Each of the top olive Menu tabs work.: Products, Photo Gallery, Contact
Even better, upon clicking, each drop-down stays in view, (none of this "hover" nonsense !) ....
....so plenty of time to select a sub-page....
And every page I tried appeared quickly.

The "search" worked tolerably well.
"shiplap" brought up shiplap.
But "Apex" brought nothing ....because they haven't categorised any sheds that way.

One "fault".... the Photos under "Fuel" were squashed.....
....but that isn't a navigation problem.

Hoist is a site that works well on a Tablet.....

...unlike:>>
https://www.skinners-sheds.com
...which is now a scroll-heavy monster ...with an over-sized "hero" intro - worse as an auto-carousel.....
...with pre-school flat, coloured slabs for links - lacking the detail and (relative) sophistication of its predecessor design.


This one:
https://weatherleyfencing.co.uk
....looks a bit better than Skinners - but still makes more work for the Visitor with unnecessary scrolling past over-sized photos and panels.....
....esp. the pointlessly large black panel "Our Happy Clients".

Selecting "Products" and it becomes obvious that this re-design has been "optimised for mobile" - at the expense of Desktop Users.

On desktop, each product line fills the page width - wasting space....
...only saved by each product line being bordered ...something which the minimalist designers would prefer removed as "unnecessary clutter"

While the "journey" is less than ideal, each destination (product) page is good.
Plenty of content in one view. i.e. not overly high spacing for each line.
Spolit slightly by borders betwee sub-products being feint.


Finally, another site "optimised for mobile" which, unlike Hoist ( where every main feature is within one view on the Home page ) is another scroll heavy monster.
https://www.selhursttimber.com
Thankfully lacking the infantile slabs of Skinners - but the Menu bar lacks distinguishing borders - and their Menu choices seem curious and few.

Scroll down to the white panel - and on the right is a sort of "contents" list - but nothing clickable.

Further down and we get a random selection of oversized panels, photos 3 abreast ( most of dubious value : ends of planks ? copper tubes ?)
Maybe its me....but would a "table" with columns be easier to assimilate ??
More importantly, tabulated, most of these products could be seen in one view - i.e. without scrolling.
Much less work on Hoist !

If people want a different experience on mobile --- why f*ck it up for Desktop users....
.....but has anyone asked whether people want less functionality and content on mobile ???

As according to one Web Design website:
"85% of adults think that a company’s website when viewed on a mobile device should be as good or better than its desktop website."
So there really is no excuse for dumbing down with "mobile first optimisation" .

 

[Akrapovic]

If the touch target is smaller than your finger, it's an automatic fail.

The fact those defending this site says it works "tolerably" says quite a lot.

Please note I've used random formatting in my post. It makes it seem more important.

 

[Tozovac]

If the touch target is smaller than your finger, it's an automatic fail.

The fact those defending this site says it works "tolerably" says quite a lot.

Please note I've used random formatting in my post. It makes it seem more important.

Your response above would indicate most everything with iOS7‘s reinvented non-button tiny-target text-only “buttons” are an automatic fail. Thank you for finally coming around.

 

[Akrapovic]

Your response above would indicate most everything with iOS7‘s reinvented non-button tiny-target text-only “buttons” are an automatic fail. Thank you for finally coming around.

You should investigate the difference between display areas and touch targets. Just add it to the list of things you should look up We'll lump it in with Parallax, UiX, Responsive Design, Mobile First and the rest of the terms used incorrectly with such authority in this thread.