Designfactory by Olof Olsson

Work with cursors instead of loading animations

olof — Wed, 02 May 2012 11:53:39 +0000

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?

On an AJAX-request, add a CSS-class ”wait” to the body
Add this to your CSS-file:
```
body.wait { cursor: wait; }
```
Handle your data stuff
Run a callback function such as onComplete and remove the CSS-class.

Check out this live wait cursor example on jsFiddle

Cross Browser Testing your Web Page with Browser Stack

olof — Tue, 03 Apr 2012 11:16:14 +0000

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!

Flexible auto-width fonts with CSS and jQuery

olof — Wed, 08 Feb 2012 14:28:09 +0000

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!

CSS Browser Detection

olof — Fri, 03 Feb 2012 11:15:17 +0000

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:

A windows machine with Firefox 4:

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

Mobile website versus mobile app

olof — Wed, 25 Jan 2012 06:28:31 +0000

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/

25 jQuery Plugins to help with responsive layouts.

olof — Tue, 01 Nov 2011 10:12:13 +0000

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.

http://speckyboy.com/2011/10/24/25-jquery-plugins-to-help-with-responsive-layouts/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+veerlesblog+Veerle%27s+Blog+3.0+-+All&utm_content=Google+Reader#When:17:33

Öredev Creative Javascript and HTML5

olof — Mon, 24 Oct 2011 12:42:34 +0000

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.

LESS – Another way to do CSS

olof — Mon, 19 Sep 2011 07:03:41 +0000

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/

Extend jQuery with .toggleAttr()

olof — Sun, 11 Sep 2011 12:47:23 +0000

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; } });

Avoiding common HTML5 mistakes

olof — Mon, 22 Aug 2011 11:31:42 +0000

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.

http://html5doctor.com/avoiding-common-html5-mistakes/