I’ve been spending lots and lots of hours making nice loading animations to make graphic/interaction designers happy. But how many of you actually think about changing mouse cursors instead?
body.wait { cursor: wait; }
Check out this live wait cursor example on jsFiddle
As soon as you have your Web Application up and running, you normally need to test in to make sure it renders well in a lot of environments and browsers. Especially true for developers that spend their time in Mac OS, having the majority of the potential visitors in Windows/IE.
Historically I’ve been playing around with virtual machines running old versions, and I also had a quick look at Adobe BrowserLab and Browsershots.
Today I found a newcomer in Browser Stack. At a first glance I really like the approach, you basically enter your URL (also works for localhost!), choose what browser and resolution you want to run and Browser Stack will fire it up for you. Then it’s just to click around and try your site. It also shows good support for Mobiles like the iPhone or Android-running devices.
Have a try, you can sign up for a free 30-min trial!
There’s a lot of situations where you design or develop something with fixed width. Let me give you an example.
Say you have a form with two columns. Your left column holds a label, ”Addictive”, and your right column holds a textbox. In most of the cases you probably set a fixed width for the left column. But what if your site fetches the label text depending on what language your user has chosen? And what if the translation is a lot bigger than the original?
For instance, ”Addictive” in English is ”Beroendeframkallande” in Swedish (yup, that’s one large word, or actually 2 words put together). That will make your little label-div trying to break lines and ultimately mess up the look of your page.
Apples iProducts has a great implementation of this and an easy way to find it is to compose a new e-mail and start writing in the to-input. The longer the e-mail get, the smaller the font-size.
I ran into this little smart jQuery Plugin called Fit Text that looks very promising. Go have a look!
A technique I used for quite some time is to detect the browser and add an appropriate class to the body-element. I used this mostly to differentiate IE-versions and add appropriate styles to elements that got screwed up. Two examples.
A windows machine with Internet Explorer 7:
<body class=”ie ie7 win”>
A windows machine with Firefox 4:
<body class=”ff ff4 win”>
Today I ran into a small script that makes this possible (and even add some more properties). It’s a variant of modernizr but a bit smaller and just for detecting the browsers.
Check it out at: https://github.com/rafaelp/css_browser_selector
You need to consider the pros and cons of building a mobile website or a mobile app (native). I found a good post form Adobe on this matter, have a look!
http://www.adobe.com/newsletters/inspire/february2012/articles/article7/
We need to better adjust our layout depending on what device the customer uses. I’m still thinking about an iPhone version of this site, eventhough it’s ”OK” in the browser from start.
Have a look at this top 25 list for some ideas.
You will find me taking a crash-course in Creative Javascript and HTML5 at the Oredev conference 7th and 8th of November. Would be lovely to catch up with some other web developers just like me so please let me know if you will attend. I will write a post later on what I learned.
We all love CSS and the power it gives to you. Still there’s a couple of features that would be great extensions. Have a look at the LESS framework and see how you can extend your CSS-code in a smart way http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/
As far as I know there is no way to toggle an attribute, such as an input disabled attribute. Extend with this to get it quick and nicely:
$.fn.extend({
toggleAttr : function( attrib ) {
if ( this.attr( attrib ) ) {
this.removeAttr( attrib );
} else {
this.attr( attrib, attrib );
}
return this;
}
});
I bet you’re all as curious as me on the HTML5 framework. However the transition might not be that straight-forward as you think. This is a post about what you’re not supposed to do.