So there I was, whittering away my time on facebook when I noticed I could resize the textbox of which I was writing my useless comment. My immediate thought was that facebook had opened up the ability to resize, but nay! In firefox 4 you now have the ability to resize textareas! Sweet! I’ve always admired it in google chrome and now us firefox lovers have it too!
In the bottom right, you see it. The 6 dots of resizeable glory
If you’re running the latest version of firefox, check it out here
A pretty simple philosophy: If you make the primary action on a form or web page stand out, users will be more likely to click it. By emphasising these buttons or actions you are attempting to draw the user’s focus toward it. And by primary action, I mean the submit, send, save etc buttons; actions where the user is making progress. Secondary actions could be buttons like back, undo or cancel
There are a number of ways to emphasise the primary action. One of the easiest and yet still effective methods is to colour the button brightly to draw attention. Similarly you could reduce the saturation of the cancel button. The human eye is drawn to areas of colour which stand out from the page. Also culturally the colour green is associated with a positive action and so if the user is in a hurry or just speedily going through the form, when they see the green button they will know it’s the button that submits the information. Chances are that they won’t actually read the text of the button!
Just thought I’d let you all know of a quick trick to get your text to vertically align within an element without using nasty padding or margin hacks. If you know that your element is going to be a certain height, then you can use the css attribute ‘line-height’ and give it the same value as the height of the object. Please note that this will only work where there is only a single line of text.
The background colour I’m using is #EFF8F8
Here I have a pseudo-button and actually it’s just a text link within a <p>. Here’s the HTML and css:
<p class="actionbutton"><a href="/BuyingAndSelling/BuyHoliday">Buy Holiday</a></p>
p.actionbutton
{
margin:0 auto 1em auto; /*center the button on the page*/
text-align:center;
width:124px;
height:44px;
}
p.actionbutton a
{
line-height:44px; /* same height as actionbutton element */
font-size:1.2em;
display:block; /* makes the whole area clickable rather than just the text */
text-decoration:none;
color:Black;
background-image: url('smartbutton.gif');
}
/*rollover*/
p.actionbutton a:hover
{
color:DarkOrange;
background-image: url('smartbutton-down.gif');
}
Here are the source images for you to play around with
Normal button state
On mouse rollover
It’s always good to keep web pages clean and free of clutter to focus the user experience on what really is important. For this matter, it’s nice to be shown the difference between the time now and the time something was posted in a informal way such as below:
So if you still wanted this uncluttered view but still desired to allow the user to see the exact moment that was, then maybe you’d have to let the user check a checkbox in their user settings are show an exact time when the view of that object is more detailed. However I’ve come up with the idea that on mouseover the nice and informal ‘time since’ can be replaced with an exact time of the post in an easy custom filter.
Here’s the same chirp as shown above but with the mouse hovering over the time.
When the mouse is rolled back out, the informal time since is displayed again.
Seamless user experience showing more detail when the user wants it 
from django.utils import timesince, dateformat
@register.filter
def timetoggle(time, id):
link = "<span id=\""+str(id) + "timesince\"> about <a href=\"#\" onmouseover=\"document.getElementById('"+str(id)+"timeactual').style.display=''; document.getElementById('"+str(id)+"timesince').style.display='none';return false;\">"
link += timesince.timesince(time)
link += " ago</a> </span><span id=\""+str(id)+"timeactual\" style='display:none'> at <a href=\"#\" onmouseout=\"document.getElementById('"+str(id)+"timeactual').style.display='none'; document.getElementById('"+str(id)+"timesince').style.display='';return false;\">"
link += dateformat.DateFormat(time).format("g:ia o\\n l jS N Y")
link += "</a></span>"
return mark_safe(link)
Use in the following way: {{ time_object|timetoggle:unique_identifier }} Here’s an example: {{ post.pub_date|timetoggle:post.id }}
Comments