Web Minimalism and Sucking at it

The original title to this post was “Everything New, Sucks”, but I thought I’d be nicer as to not take a complete 180 considering my last post. My New Year resolution to be less grumpy is looking shakier by the day.

Beyoncé style  = Whitney code?

I’m truly dismayed how some of the seemingly beautiful layouts are actually courtesy of HTML, CSS and JavaScript that look like the residue in a crack pipe. If the front page of your site is drafting more hobbled scripts than the average backend dashboard, then you’ve got problems son. It’s almost like no one really cares how it’s all put together as long as it looks good.

I know minimalism is the new in-thing in web design, almost to the point of being outright confusing or silly, but can we at least extend the sentiment to the scaffolding too? Or else, it kinda seems stupid, you know, hypocritical.

I also come across a lot of designers who quite loudly espouse their work is only meant for “modern” browsers and will actively block access from older browsers rather than encouraging them to upgrade or change them. The excuse is that older browsers “break” their carefully carved patchwork of copypasta.

“Break”?

If it makes your site unusable, go back and fix your work. It’s called pride in workmanship, you misanthropic troglodytes!

I know its fashionable to rag on the browser, but people aren’t going to change their browsers because your work doesn’t work on them. Deal with it.

Can I read the text? Can I see the images? Can I still “use” the site? Does your site have actual “content” that I can still consume? MOST websites will work in older browsers, even HTML 5 ones, once you stop giving it meaningless improvements, and “breaking” is acceptable as long as the content is still accessible. If you absolutely have to use the new functionality for something, then at least use Modernizr to make it usable on older browsers.

Which brings me to…

The HTML 5 Bug

Now slightly more infectious and deadly than H5N1. I’ve got nothing against it, but it seems it’s being abused by the same mindset that made the bad ol’ days of HTML 4 almost as unbearable. The fact that HTML 5 is new and hip doesn’t mean you stick every new tag in your design inappropriately and call it progress. The draft isn’t even finished yet and I’m already seeing designers making ridiculous uses of the footer, header and map tags.

I.E. I’ve  seen <map> still being used being used as a navigation bar instead of… and here’s a shock… the bloody <nav> tag. I’m sorry, is this 1999? Ah, but it’s OK, because the rest of the page is HTML 5.

<map> Is meant to be used for image maps and can designate clickable areas on an image for page interaction like photos identifying people.  I can accept that HTML 5 is here to stay and there’s nothing that can be done about it, but at least learn to use it properly!

I wouldn’t be this upset if it weren’t for the fact that the above abomination was the work of a “professional web designer”. Well, I’m not a professional web designer and even I know this. And if you still can’t get it, well then maybe you should be doing something else… like making soap.

Quit scripting your sites to death

There’s a post by Jim Dalrymple made last month that really puts into perspective how much rubbish is loaded asynchronously after the content itself has arrived. All the extra bloat just bogs down the browser until everything else arrives so even if the content is there, you can’t scroll to read it.

The real kicker is that the biggest load on that list was BGR and that’s a “minimal” layout. “The Biggest Letters in Tech”? Apparently.

And most of these aren’t even useful, but rubbish like Avalanche meant to drive traffic to content devoid of content. The rest are poorly engineered statistics widgets that have better use as browser stress tests than gathering user data on a production site. Or are ad widgets. These scripts are massively inefficient because they’re doing a lot of server-side work client-side in an effort to offload some of the burden on their own infastructure.

JavaScript isn’t C++ so quit treating it like so.

And what’s with designers and content managers not caring about what they include in the HTML sent to the visitor?

I checked the source on CNN.com and found the following buried in an HTML comment around line 200 :

	Last snapshot: 12/12/2011 11:30 AM
	IF auto generated include above stops working, uncomment the html below and manually update at hourly intervals:

<li class="pmNsStory">
    <div class="pmNsHeadline"><a href="http://www.cnn.com/2011/12/11/opinion/graham-debate-romney/index.html">Opinion: How Romney blew it</a></div>
    <div class="pmNsPopularity"><div class="pmNsPopImage" style="width: 98%"></div></div>
</li>
<li class="pmNsStory">
    <div class="pmNsHeadline"><a href="http://www.cnn.com/2011/12/11/sport/ryan-braun-drug/index.html">Spokesman: Braun will be 'exonerated'</a></div>
    <div class="pmNsPopularity"><div class="pmNsPopImage" style="width: 69%"></div></div>
</li>
<li class="pmNsStory">
    <div class="pmNsHeadline"><a href="http://www.cnn.com/2011/12/11/us/pennsylvania-paterno-hospital/index.html">Panama's ex-ruler Noriega returns home</a></div>
    <div class="pmNsPopularity"><div class="pmNsPopImage" style="width: 67%"></div></div>
</li>
<li class="pmNsStory">
    <div class="pmNsHeadline"><a href="http://www.cnn.com/2011/12/12/world/meast/syria-unrest/index.html">Ex-Penn State coach Paterno hospitalized</a></div>
    <div class="pmNsPopularity"><div class="pmNsPopImage" style="width: 59%"></div></div>
</li>

… Really?

And just for kicks, I went to MSNBC.com and discovered the actual “content” starts at line 716 :

And that's not even the real beginning.

Even after turning off word wrap, the first third of the source is nothing but inline JavaScript and CSS and so is a full half of the entire source.

Mind you, both are meant to be “minimal” designs far removed from their older, uglier, “less efficient”, versions.

I haven’t checked the mobile versions of these, but considering most people pay for their data plans by the MB, even if they’re half the size of their desktop counterparts, the designers of these and other bloated sites are doing a huge disservice to the very people who are paying their bills.

Any Browser is Dead. Long live bloat!

When did it become fashionable — respectable even — to design websites so poorly and with so much extra rubbish that it would be unusable? Forget people with special needs, I mean the average Joe with a decent computer, modern browser and a good internet connection would be in imminent danger of a face-full of glass shards or plastic splinters if he even dares to visit some of these sites.

The common excuse is that, well, you have to make sure that the site’s added features need a lot of capabilities that aren’t available on older browsers. I have news for you: The web has been around for longer than some of you designers have been alive and the core use is still the same. To consume content.

The vast majority of effort on any site should be on the backend. The core architecture, the security, the control panel, the security, the database, the security. Sort these out first and you will find yourself spending less time needing to make UI improvements. A good workflow will encourage a good UI.

Advertisement

There’s no such thing as an obsolete browser

In what seems to be a continuing trend here, a significant number of users seem to be unwilling or unable to upgrade their browsers.

Here’s what February of 2009 brought to eksith.com.

Be afraid! Be very afraid!!

Be afraid! Be very afraid!!

Makes me question the whole purpose of designing sites with the latest browser in mind anyway. All this time, I’ve been thinking about users who have a browser with full CSS/XHTML capability and those with none. It seems there’s a whole multitude of them within a gray area between.

I’m mainly concerned with the Firefox 2.x and IE 6 groups, of which IE 6 causes the greatest concern as they present the largest group using an obsolete browser. Even the old Firefox renders pages to an acceptable degree. IE 6 presents no incentive whatsoever to design pages with semantics in mind. I have to use some kind of hack or other proprietary markup in the HTML or CSS to get it to work as it should. At least with IE 7, they’ve fixed some of the more egregious rendering issues.

And a little update on the OS stats from last year

Downgrades?

Downgrades?

People are abandoning Vista at a dramatic rate or there was simply a jump in XP visitors. Either way, Vista is at a minority this year. And, a bit of a plesant surprise, the number of Linux users have jumped dramatically as well. This would explain why there are a few K-Meleon and Mozilla users in the browser list.

All of my templates are awful!

I wish I could come to a different conclusion, but I can’t. It seems every single one I’ve made so far will fail spectacularly in any version of IE less than 7.

I know some people wouldn’t really call that a con, but considering the sheer volume of IE 6 users out there, it’s still a major problem. I hope I can get over this hurdle soon (or maybe all IE 6 users can upgrade). Yeah… Right!

PassPack on the browser end

So while the fallout from the last time I came across this company clears up, I decided to find out exactly how they do what they do. At the time of this writing, PassPack is at Beta5.39.5.

First and foremost… My old nemesis, multiple stylesheets for multiple browsers.

Whenever I see :

<!--[if gte IE 7]>

That’s usually the sign of a poor UI implementation. That means they are jumping through hoops when they really shouldn’t. That excerpt above means that they have a separate stylesheet for Internet Explorer 7. There’s one more for IE6, and it appears they have been through several versions of each stylesheet. It also appears that they’ve been experimenting with stylesheets specifically for the iPhone as well.

I know there’s no “standard” when it comes to the CSS implementation (especially CSS2), but in the year 2008, can we start “attempting” to use cross-browser CSS please? But hey, it’s a beta, so let’s move on.

You will be reminded to enter in an email, I strongly suggest you do use it. Just in case you forget your password… for the password reminder *cough*.

There’s an option for Auto-Login, and I suggest you not use it. As far as I can see, this defeats the whole purpose of security. Call me paranoid, but I never enable auto-logins in anything I use. Call it an old habit as an admin, but I think it makes sense.

PassPack auto lockout The system will automatically log you out when inactive. You can change this setting by going into Account > Options. I suggest you not increase this setting. It defaults at 5 minutes, and in fact, you may want to reduce that to 2. Quickly finish up any entry you are making as the system cannot lockup while you are making an entry. Do not walk away from your computer while you are entering in anything because of this.

Get into this habit : Login, do your thing, logout.  You might think it’s a pain to re-enter your info, but don’t worry about having to log in again. It’s much worse if you left it unattended for some stranger screw up your passwords.

Passpack Password ListThe Password display shows if you have set any of the additional options for each password entry… That is an actual Password, a UserID, a Link to whatever login page you will need the password for as well as any Tags. I’m not sure if the Tags make any sense if you are descriptive in the Title.

PassPack Disposable Login Do use the disposable logins if you plan to take a trip. It allows you to create a one-time use login for when you are away from your home computer. It’s a good idea if you are using a system in a CyberCafe or hotel.

PassPack makes extensive use of JavaScript to do what it does, which means, you will have to use a JS enabled browser (screen-readers for the visually impaired and text-only browsers like Lynx are out). This is to make sure that bots cannot access the system, since they and other automated hacking tools are unable make use of JavaScript.

The scripts are designed to ensure that you are not being tricked into entering data while browsing another page. I.E. Phishing attempts. Also a lot of password encoding, special character recognition, strength metering, query sanitizing etc… takes place client-side. Some of the scripts appear to be written by Francesco Sullo, also the author of aSSL.  

It’s too bad their employees couldn’t learn any lessons from this guy, because he apparently knows how to spam “Evangelize” properly… That’s what I call helpful spam.  Now if only he would stop giving 5 stars to his own product on Download.com.

In addition to this, PassPack does use some publicly available code. The system makes heavy use of the jQuery script library to do AJAX calls and perform other UI functions. jQuery alone has a number of browsers that it is compatible with, and a few others that it isn’t.

PassPack itself, thus, will be have the same browser compatibilities. In addition to this, you cannot use the iCab browser as well as OmniWeb. Both browsers are for the Mac.

Any attempt to use them or other incompatible browser, and you will be greeted with the following message :

Sorry. The version beta5 of PassPack 
has not been full tested with this browser version.

The Pros:

It works!
As far as betas go, it’s pretty decent. I would like to see more UI refinement and for God’s sake, get rid of the multiple stylesheets.
I think I will be keeping my account and I look forward to the next iteration. Hopefully they will continue to perform as advertised.

What exactly is PassPack? It’s a bookmarker on steroids. Except, substitute “Title” with “Location” and “URL” with “Password”. For what it is, it gets the job done.

The Cons:

It’s not accessible. The UI could use a bit more streamlining as I can see how novice users can get a bit tangled up during the registration process. They need to make it clearer ahead of time that there are three crucial bits of information required from the user during the registration :
Your Username
Your Password (Moderately complex)
Your PackingKey (Very complex)

The Password allows you to login to the system. The PackingKey unlocks all your entries.

They haven’t restricted access to the stylesheets and script libraries. Which means a compromised browser may be tapped by an unscrupulous individual and trick the user into entering in his/her info. I should not be able download any of the script files or CSS by plugging the URL into my browser. This is kind of important.

Fortunately the fix is simple; They just need to check the referrer… /css.php?getfile=stylesheet.css Or something similar to make sure the files are being requested by the same domain. This is especially important for the JavaScript files. In short, if it can be hot-linked, that’s a problem.

It would be nice if they can accommodate users with special needs.

What’s inherent to this system, and indeed endemic to all web-based solutions, it’s web-based. As in you need to have Internet access to retrieve your passwords.

Now if only they will fix their ridiculous marketing campaign, things would be dandy.