Websites are built almost solely on its communities. In the case of blogs, the communities hang out in the comments section. That’s where all the socialization and exchange of ideas take place. But writing a thoughtful comment alone is difficult enough. Don’t make it any harder for your readers.
This is one of the most horrifying comment areas out there:
Now that’s a long scroll. This isn’t from a product landing page or a shopping site with pages upon pages of “special” offers. This is a blog, for crying out loud!
Let’s assume for a second that only the top box (which is the actual comment form) exists and focus on that. It’s just too busy! My eyes were all over the place with the sprawling combination of boxes and text.
I know it takes effort to align form elements. (Or not, since this particular site uses tables to do that.) But it would be much easier on the eye if all the input fields appeared in a linear fashion, one after the other, to minimize the confusion.
Linear is not always necessary, but always keep forms as simple as possible, if you can help it. Take a cue from Smileycat’s comment form design showcase and note how functional and uncluttered those forms are.
Okay, so you get through the ordeal of leaving a comment, but this blog says you’re not done yet! It continues to nag you with the “Blog this at your site” and the “Tell a friend” sections. It doesn’t help that the lack of comments subconsciously discourages the reader from actually commenting. Even if there are any comments, those two extra panels have already separated the reader from the “leave a comment zone” since the comment box is now too far away.
The Share This button is certainly more desirable, both in form and function, than these bulky boxes. If you don’t think a button will cut it, what about collapsible panels with JavaScript?
Since the comment form above belongs to a blog in a blog network, many more readers will be turned off and confused by this comment form on several different blogs. It’s not too difficult to elminate this usability problem: Don’t complicate the process. Don’t ask too many questions. Don’t look desperate. Just let them comment.
Umbrella Today, which is a beautifully crafted site (CSS parallax effect!) that tells you whether or not you should bring an umbrella outside, does not work for me. See, it asks for a zip code—presumably limited to the United States only. But I don’t live there.
Now, I know, there are countless websites that exclude a certain demographic in every imaginable way, not just by geography. After all, on the Internet you’re free to do anything you want. But if you don’t like how something is working (or isn’t working), you’re free to blog about it as well.
Go local, be successful, then branch out
To all the developers out there: going local is a good strategy, but if you can help it, try to make your nifty little web app more accessible than just for your neighborhood.
And I’m not just talking about the one-person startups but also the bigger fish in the pond. I wonder how long it will take for Google Maps to completely and accurately cover the planet. (I don’t know if we should be excited when it does, either, but that’s a different story.)
True usability and accessibility
When we mention the term usability in terms of web development, we look at how comfortable users are in using and interacting with the interfaces that are created. Closely associated with usability is accessibility, which champions the idea of never leaving any differently-abled user out.
Doesn’t true usability and accessibility cover my dilemma with Umbrella Today, since I’m left out of its target userbase?
I do hope the makers of Umbrella Today and other people like them stop discriminating by zip code and start reaching out to other parts of the world.
Again, this is if they can help it. Because if there’s one medium that can make it possible, it should be the Web.
Ben Terrett of Noisy Decent Graphics has written a list of things that describe what “his Internet” is like. From an encounter with a technologically-challenged executive comes an inspiring exercise to get everyone on the same page first.
…I thought it might be a nice idea to get everyone to describe ‘their internet’ at the first meeting of any new client. Like they do at school when the new kids arrive mid term. Get everyone up to the same level. That way, everyone would know the ‘level’ of everyone else and there would be no clangers later on.
The list is not only informative, it’s also prescriptive (in a sort of passive-agressive way!). It addresses the little things clients don’t really take into consideration when they describe what they want for their websites. But the thing is, you’re the expert, so grab the opportunity to teach what thoughtful and usable design is. Some of my personal favorites from the list:
- Not using Flash for anything other than videos
- Giving simplicty and clarity top priority
- Not reinventing the wheel
You may not agree with everything on Ben’s list, but the idea is not just to yell at your client for “not getting it”, but to explain why you’re doing “it” that way. It strengthens the relationship you have with your client, and ensures clear communication pathways in between.
I’ve noticed this trend to screenshot tweets instead of copy-pasting their texts in blockquotes for some time now. On web design and technology blogs, no less. You’d think these sites who constantly write articles about HTML, CSS, web standards, usability, semantics would actually listen to their own advice.
What do people get out of doing it, though? Is Twitter really that much of a game-changer that you can now break the conventions of quoting people in articles on websites? Is it really that big of a deal to debate on how you should add tweets to articles—which is so obviously linkbait?
Are tweet pages designed so much prettier than your default blockquote designs that you feel compelled to use them instead (that’s definitely an “unsuccessful designer trend” isn’t it)? Though, consider the construction: large text, a clear indication of who said the tweet, and a fuzzy timestamp. Maybe that’s what blockquotes should aspire to be?
Are tweets such special data forms that you need specialized plugins and scripts like WP Quote, Twickie, QuoteURL to display them? Or do those exist to up one’s geek cred and feed the third-party Twitter apps machine?
Still, those aren’t as bad as web apps like tweetshots. Want to share a tweet on Tumblr? Use the Quote post type. WordPress is getting custom post types in its next major release too. But publishing platform or no publishing platform, that’s what the HTML tag <blockquote> is for.
Let me channel Steve Ballmer and say: Blockquotes, blockquotes, blockquotes, blockquotes, blockquotes. They’re not that hard to use, certainly not more than taking a screenshot and uploading it.
I understand why on some occasions using images instead of text and other data formats is preferred. They’re usually more portable when passed around in email, forums, social networks, and other communication platforms. More people know how to deal with images than URLs too. But for the purpose of quoting tweeple on websites, I see no excuse for displaying text as images.
I’ll spell it out for you in <strong> and <em>: display text as text, not as images, damn it!
Sure, screencapping tweets may not be as grave a sin as using tables for layouts, but back when that was the dominant method of creating websites, it was a pragmatic choice to make do with the technology available. The choice to use images for text is illogical today. It is confusing behavior that is inexplicably linked to Twitter’s success.
Blackbird Pie is Twitter’s very own tool for embedding tweets on webpages without the cumbersome, semantics-killing screenshot method. It still lacks the dead-simple interface Twitter is notorious for, since you have to enter the URL of the tweet to grab the embed code and it’s not even built into the system yet, but that’s because it’s a rough prototype at this point.
Since Twitter is an ecosystem of early adopters, it didn’t take long before a bookmarklet surfaced, which sports only a minor difference with the original code in the date format, and seems to display better on this site.
Note that this method inherits your websites styles, which means you may or may not have to tweak your CSS to accommodate it. Unfortunately it still looks bad in feed readers.
Has progress been achieved here?
I’m not sure this is any better than a screenshot. Putting aside the long-winded user flow of grabbing the code since that can be remedied once it’s built into the Twitter system, there’s an overflowing amount of inline CSS to copy and paste. The advantage to this static code, however, instead of a JavaScript embed is that the text is preserved even when the tweet is deleted.
The question remains: should people go through all this trouble to use tweets as quotes? Is there really that much more to be gained by preserving the tweet “format” over a simple blockquote? I still don’t think so.
Everything old seems to be new (and hip?) again. And I’m not too sure I’m happy about it.
Short URLs
Shorter URLs are all the rage these days because of Twitter and its 140-character limit. If you’re one of the top sites on the web is practically mandatory for you to roll out your own URL shortening system. Ars Technica, for example, whose official URL is arstechnica.com, also has arst.ch. If you’re on a CMS like WordPress, you’re advised to give out the post ID permalink instead of the keyword-rich permalink of your blog post for the same reason.
Not too long ago, SEO and usability experts were on the same side and recommended readable URLs. Now that Twitter is the new internet marketing (I think they call it social media now) battlefield, the rules changed. When the next killer Web 3.0 app comes out, will we compromise and adjust once again?
But then again, has the Web ever stood still? Maybe I just thought it was beginning to.
WebKit’s CSS animations and scrollbars
You can now style scrollbars and perform animations using CSS in WebKit browsers.
I remember when Internet Explorer started to support scrollbar styling and almost every personal site took advantage of it. But then they grew out of it and were told by the gurus not to mess with the browser chrome.
I also remember <blink> and <marquee>.
But then again, “styling scrollbars isn’t messing with the chrome anymore than styling a button is.” Would the world be a saner place if browsers behaved the same way and all looked alike?
DiggBars
Digg has come out with its own version of the external page framing mechanism which they call the DiggBar.
Said mechanism is nothing new, and never really died out even to be considered a comeback, but Digg has a powerful following by all that which is noisy in the blogosphere to build a considerable amount of buzz. And no matter how you look at it, framing external pages is still framing, reminiscent of the era when HTML framesets were considered cool.
But then again, perhaps in this new era listening to the clamor of the crowd is no longer a fluke, but a very real way to improve one’s business.
A few weeks ago Google announced that it can now extract and index textual content from Adobe Flash files. We all know that creating websites in pure Flash is a big no-no if you care about being found through search engines. So is there nothing left that’s stopping web designers from switching from plain old HTML and CSS to rich interactive Flash? I have yet to find somebody who agrees with a resounding “yes!”
Rand Fishkin, CEO of SEOmoz, believes that this new development isn’t compelling enough to start building sites with Flash.
Flash content is fundamentally different from HTML on webpage URLs and being able to parse links in the Flash code and text snippets does not make Flash search-engine friendly. I think it’s great that Google’s digging deeper into Flash, but I don’t believe web developers should be any less wary than they’ve been in the past about Flash-based websites or Flash-embedded content.
If anything, I commend Google for continuing to convince web designers and search engine marketers alike to embrace web standards by pushing for the best practices in coding websites. Of course it’s the most logical thing both parties: search spiders need to parse content properly so that they can index it, and a well-formed webpage makes this possible; webmasters need not wade through nested tables and unnecessary tag soup when there’s a better way. And Google should, since it’s way more influential than Opera or any other web company out there.
However, Google’s efforts to read Flash still seem to be in the premature stages. Typical Google, they always release their products in beta without being wary of the consequences.
By consequences I mean clients who are now running around telling their web designers to create animated intros and the extravagant interfaces for their websites. I can’t really shoot down this little achievement by Google—except that it’s getting scarily smarter everyday and should try to have more features than issues when they launch a product.
More importantly, I can only continue to condemn those who misuse Flash without any regard for accessibility, much less usability, whatsoever.
*/
