The Persuasive Tech Lab did early research on the factors that affect the credibility of websites. Since our investigations in the 1990s, we’ve found that online credibility has morphed. With the rise of Web 2.0 services, the focus of credibility evaluations extend beyond the page to the people represented. In other words, Credibility 2.0 has become more like reputation, or perceived reputation.
The researchers compiled 10 guidelines for building the credibility of a web site. These guidelines are based on three years of research that included over 4,500 people. It is still a popular resource today.
While the project is now archived, it’s interesting to think about how this might have evolved since the list was first released 10 years ago — especially with the advent of social media. Although…they should probably fix a couple of the links on their page, even though its archived.
It’s not every day you get to design a big ass new editorial site from scratch. This is a look into the design process for Polygon, the second of two huge projects tackled by Vox Product in 2012. Be warned: this is a deep look at our process and our work. Grab a beer or three, and join me for a…
This is an excellent and detailed look into the redesign effort that went into Polygon.com, a gaming journalism outfit. Take a look!
While doing some research on browser context menu events and manipulation, I found out that you can add items to the menu in Firefox. (FYI: the context menu is typically activated by right-clicking on the page). This is great, because developers don’t have to override the default context menu to add actions specific to their site or application.
Some peeps (like on the github repository for Bootstrap) have commented about how the Bootstrap carousel doesn’t provide a nice sliding animation fallback for our poor, poor IE users. Well, I ended up making one that worked reasonably well for IE! The commented code one I’ve posted in the gist below is a modified version of what I had originally created.
I personally would argue against modifying the Bootstrap code to allow for a sliding animation in IE, because it seems to go against the ‘ethos’ of progressive enhancement. Should we force all users to download specific code that only works for a (small) subset of users? Or maybe the carousel should just be using jQuery to animate the slides in the first place?
A while ago, I read about an analogy that compared the differences in browsers/platorms to TVs (might have been 37Signals?). Would you make a film that could only look pretty good on a small, black and white television because there are still a few people out there using the antiquated technology, or would you rather make some 1080p masterpiece, knowing that the b/w TV users would have to suffer the minor inconvenience of a clipped visual and lower resolution?
Unfortunately, sometimes client requirements prevail.
Anyway, I think there’s definitely room for improvement in this code (such as auto-calculating the width of each slide), but it’s a decent start that I’m hoping might help anyone else out there who has invested in the Boostrap carousel and absolutely NEEDS a sliding animation for IE.
I just discovered Font Awesome: “the pictographic font with 150+ icons”. It’s been designed to use with Twitter’s Bootstrap framework, and the claim is that it’ll even work all the way down to Internet Explorer 4 because it uses the commonly-supported CSS rule, @font-face.(I thought it support for the rule started at IE5, but I guess not!).
While there are some minor tweaks being made to make sure that the icons look similarly cross-browser (see comments at Hacker News), the ever-expanding set of icons mean that sprites may become a thing of the past!
Update March 20th, 2012: As of Bootstrap version 2.1, this issue has been fixed!
I found an interesting issue with Bootstrap’s Carousel plugin. Well, it could also be a case of lacking documentation.
While looking at a carousel in IE8, I noticed that my slides weren’t going beyond the second slide. The issue is that there’s an if-statement that will always return false if the css class “slide” isn’t part of your carousel HTML markup:
Once I added “slide”, the carousel worked in IE8. I’ve requested that either the Bootstrap documentation be updated so that the css “slide” class is included as a part of the HTML markup (assuming that the future will bring more animation types), or that the logic be changed to something like the code example below (an “opt in” approach):
I’ve submitted this as Issue #2440 to Bootstrap’s Github project page.
Can you see the fancy light-gray text within the inputs below? If so, congratulations! You’re using a modern browser! If you’re not familiar with placeholders, go ahead, click on each input, type in them, erase what you type, and click back out of the inputs — see what happens with the default placeholder text:
Magic, huh? HTML5 has standardized a way to create these placeholders on form text input and textarea elements, and all you have to do it add the placeholder attribute to your element like so:
If you’re part of the less-than-a-few percent of people who can’t see the text — don’t worry, you’re not missing much. In most cases, web developers and designers should really be using labels for form elements for a few reasons:
If an input is only using a placeholder, a user might forget what they were typing in a particular field, and would have to clear it out in order to see what it was for.
There isn’t a standardized way to style placeholder text (specifically, the color) with just CSS3.
Users can click or tap on labels in order to activate the input. For example, this makes it a lot easier to click on checkboxes! How awesome is that?
Let’s take a closer look at the last point:
a lonely checkbox :( :
Wouldn’t it be easier if you had a wider area to click or tap in order to check that darn box?! Enter the label tag and its amazing for attribute:
So if the label element is so amazing, why use a placeholder at all? Reasons could be:
To save screen real estate (especially for mobile devices),
To match some streamlined look-and-feel (this is a stretch),
To use with simple and common forms, like the ubiquitous user ID & password text inputs.
In all honesty, you can’t go wrong with a label, and you’re going to do yourself and your users a favor by using these handy HTML elements.
If for some reason you must absolutely use a placeholder, and it has to work similarly in as many browsers as possible, your best bet is to use a jQuery add-on or plugin which will automatically take care of it for you. I’ve decided to join the fray, and I’ve come to offer my own simple plugin to help tackle this demon!
Woo! I decided to go with Tumblr as a blogging platform due to its ease-of-use and focus on content generation. It was simply a matter of changing my domain’s A record to Tumblr’s IP address, and voilà! The blog begins.
For the time being, I’ve decided that my focus for the blog will be posting about web-oriented topics (web dev, design, UI/UX) and side projects that I’m working on (albeit slowly).