Designing for Small Screens

stack of dell mini 10V netbooks
stack of dell mini 10V netbooks

Netbooks are becoming very popular today because of the price and the true needs of 90% of the computing population. Most people are just checking their email, getting on Facebook, tweeting a bit and maybe wordprocessing. Most people don’t need anywhere near the horse power provided by fullsize laptops and desktops.

Even for myself the only thing I really need my desktop for is to work in some of the Creative Suite Apps (really only Ps, Ai, and Id). Most of my coding can be done just fine on a low powered laptop. Then throw in the portability and people are sold.

This brings up and interesting question for designers though. At one point the standard for screen resolution was 800px x 600px. Then more recently it has moved to 1024 x 768, this in fact is what I have been designing to for the last year or two. With the rise in smaller screen sizes (iPhones, iPod’s, smartphones and netbooks) should we be looking at the way we design our sites again?

The Example

I love the application Evernote. I use it almost daily. I most often use the desktop clients but when I’m on my Linux machine I’m stuck with the web inteface and then I have a problem. While all of the toolbars and items at the top of the screen are needed by the time I was actually editing a note I could see about ΒΌ inch of the editing window.

shot of the small edit window on my netbook
shot of the small edit window on my netbook

Being a fairly advanced computer user I just went in and reduce both my default system font size and then in Firefox my default browser font size and took the text labels off of the buttons. Then I flipped Ubuntu over to the Netbook desktop version and lost the bottom toolbar on the system. While all of these changes made editing a note online okay it still isn’t a great experience.

My point is this, most users just wouldn’t take the time. They just would have left the site if it wasn’t usable. Really Evernote is a decently designed site but it doesn’t take small screen size into account.

The Solution?

My first recomended solution for Evernote would be to let users toggle some of the bars at the top of the site. Add a bit of javascript in, make is persistent for a user. Problem solved. I sign in with my netbook some of the top bars are folded shut and I have a ever usable web application.

A second option would be to perform some browser sniffing (controversial I know) and present a slightly altered layout to those on smaller screens. Again we get a web app that is very usable on smaller screens without affecting the bigger screens many people have.

My Resolution

I suppose this all comes down to evaluating your user base and providing good experience for as many as possible. At the very least make sure that when you design you at least put some thought into what people will see on a screen without a lot of vertical pixels. Resize your browser to 600px high and see how usable the application or site is. If it’s not good give a bit of thought on how the UI can be improved for small screened devices.

The Best Windows Ruby on Rails Setup Part 2

Episode 2 - The Best Windows Ruby on Rails Setup, Part 2
Episode 2 - The Best Windows Ruby on Rails Setup, Part 2

This is the second part to getting a Windows machine set up for Ruby on Rails Development by having Ubuntu running inside Virtualbox. View Part 1 here. Today’s screencast will walk through installing Ruby, rubygems 1.3.5 and Rails with rubygems, and SqLite3 as well as installing my preferred code editor Komodo Edit. Watch the screencast or read below for the written instructions.


This same procedure has now been tested on Ubuntu 9.10 and works fine.


View Part 1

Installing Ruby

To install Ruby in Ubuntu we can simply install from the built in repository in Ubuntu. You don’t need to compile this from source if you don’t want to.

[bash]sudo apt-get install ruby-full build-essential[/bash]

Now let’s see what version of Ruby we have.

[bash]ruby -v[/bash]

This should return something along the lines of:

[bash]ruby 1.8.7p5000 (2009-02-22) [i686-linux][/bash]

And finally let’s check to make sure the Ruby library is working.

[bash]ruby -ropenssl -rzlib -rreadline -e ‘puts :Hello'[/bash]

Should return


Installing Ruby Gems

Ruby Gems should be compiled from source using the latest version of Ruby Gems. The first line of bash I run just runs two commands one after the other.

mkdir src
cd src
tar -xzvf rubygems-1.3.4.tgz
cd rubygems-1.3.4
sudo ruby setup.rb
sudo ln -s /usr/bin/gem1.8 /usr/bin/gem

Nothing shows as output form the last command. It creates a symbolic link.

Installing Rails

Now that we have Ruby Gems installed Rails is a very simple thing to install. You should think of Rails to Ruby as you think of jQuery to Javascript. Rails is simply a set of assumptions about how you want to use Ruby that is bundled into a Gem. Install Rails through Ruby Gems with a single line.

[bash]sudo gem install rails[/bash]

Testing Your Rails Installation

Now that we have Ruby on Rails installed properly we should test it just to be sure.

cd ~/
mkdir sandbox
cd sandbox
rails test-app
cd test-app

Now open up Firefox and enter “localhost:3000” into your url bar. You should see the standard Ruby on Rails starting app page.


As you’ll notice in the screencast Rails works but gives a warning and I wasn’t sure what it was. Thanks to Brian Mayle who helpfully points out the answer in the comments. We still need to install the sqlite3 connector. So run the following two lines and you’ll be right as rain.

sudo apt-get install libsqlite3-dev
sudo gem install sqlite3-ruby

Installing Komodo

Finally we’re going to install Komodo Edit which is my preferred code editor for Ruby on Rails projects. I have tried Bluefish, Netbeans and many other but just keep coming back to Komodo Edit as superior for how I work.

Start by downloading Komodo Edit and just directly opening it in the Archive Manager. Drag the resulting folder onto your desktop and jump back into the terminal and run the commands below.

cd ~/Desktop/Komodo-Edit-5.2.0-4075-linux-libcpp6-x86

Now it’s going to ask where you want to install your software. I like to keep things organized so I install all of the custom apps inside my Home folder in a folder called software. Run the following commands to accomplish this.


Next we have to insert the executable in our PATH variable with the command below.

sudo ln -s ‘/home/myuser/Software/Komodo-Edit-5/bin/komodo’ /usr/local/bin/komodo

Now you’ll have a new ‘icon’ on your desktop that says ‘komodo-edit-5.desktop. This is the actual icon to launch the application but first we need to right click on it select ‘Properties/Permission” and check the box that allows executing as a program. You should now see the proper Komodo Edit Icon.

I like to drag this icon into the software folder we created and then from there drag it into the top bar in my Ubuntu installation so I can launch the application easily.


Now we have a working Ruby on Rails development environment with a working code editor. If you have any questions let me know in the comments.

Links used


The Best Windows Ruby on Rails Setup Part 1

I recently purchased a new computer and had to get Ruby on Rails installed on it. Up to this point I’ve been using my wife’s Macbook for ROR development on weekends. It was time to make the jump to a dedicated environment that didn’t interfere with the Facebook cravings of the wife.

Instead of just diving blindly into setting it up I tapped the knowledge of one of the guys I know who works at Engine Yard and worked on Windows.

Update: Wayne E. Seguin of RVM now has a Rails Windows Installer so you can really install Ruby on Rails in Windows easily.

Update: I have now installed Karmic Koala in Virtualbox in Windows 7 and the process is exactly the same.

His answer to me was…the best way to install Ruby on Rails in Windows is to get Linux. So watch the screencast as I install Ubuntu in Virtual Box on my Vista PC.


View Part 2

Download Links