Chad, 22 Tools for Testing Your Websites Usability

Luke, Analytiks iPhone App
A little while ago I stumbled upon this little app for my iPhone. For those of us that don’t sign in to our Google Analytics often but know we should this app will be very valuable. Analytiks shows me just the important information I’d like to know about my websites on my phone. I can check it quick and get back to whatever else is going on that day. The interface is quite nice. I would ditch the rusted sign look myself but other than that it is fantastic. It is 99 cents in the app store.

Benjam, impress.js
It’s not much in the way of content, but the way that content is displayed. It’s simple… yet eye catching and very intriguing. Makes me very excited about where the web is heading.

What all this has meant to us at Code Greene is that finally more and more of our customers are asking us to design and build for these devices in addition to regular browsers. It has been our philosophy to not venture down dark and lonely roads, so we will often sit back a little to see where new technologies are headed before diving into a pool with potentially only one foot of water in it. Admittedly there have been times we’ve missed waves, but there are other times we’ve ended up saving ourselves a lot of wasted energy. We are at the point that cross device compatibility is now a well lit path we are going to travel on.

There are three different paths that can be taken to develop for these different technologies which are:

1. M.versions approach
2. App development
3. Adaptive/responsive design

It is sometimes hard to decide which path is best so I will explore each and tell you what we will most likely do the most of and why.

M.versions stands for Mobile Versions.  It is basically an approach where the server asks the device what are you? If it comes back saying I am a mobile device, it will then call up a mobile version of the site, which will be smaller and is usually a cut back version. The downside to the m.versions in our opinion is the potential for double work. Coding a regular version and an m.version(s) will inevitably will lead to more coding.

The App approach is probably the most difficult (at least if you are doing an iPhone app), the process to register with Apple and review your app with them is tedious, time consuming, and you could be rejected. Nevertheless, apps have a place and we see people making fortunes through apps. Nonetheless, because our focus is typically on more of a results driven basis, we don’t see a lot of business app requests. The other thing to consider, which to me seems like common sense, but sometimes isn’t seen by the customers, is if you build an app version of your website, at the very least a customer will need to find that app and download it. If you were selling online for instance, where most decisions are being made impulsively, there is high risk that in those two steps you could lose a sale. To support this, I recently read a review of the Magento Mobile version where it was reported that 66% of people surveyed would rather have a browser version than go to all the trouble to download an app.

Lastly, adaptive/responsive, though not a new idea, has re-birthed itself better. For a long time it has been possible to code a site to scale to different browser widths. Now it is just easier. The old process was significantly more labor intensive, requiring several little calculations.  In contrast, the new process works using percentages, eliminating the tedious work, making this a viable and good option. In our opinion, the adaptive technology couldn’t have come at a better time. However, there is a sort of a catch.  If a person has already coded their website, the entire site would have to be recoded to accommodate the adaptive/responsive functions. So, to put it simply, this is something that should be decided upfront and planned, designed, and coded that way from the start. Otherwise, you might be best off with options one or two as an add-on to a current site.

In summary, we feel increasingly more convinced that the growth on the new devices cannot be ignored, and we are primarily recommending the adaptive/responsive approach when making a choice between the three options. If you are interested in learning more or want us to plan out your next project, let us know.  We’d be interested in helping you accommodate your customers who may be seeking your products or services through other devices beyond the traditional browser.

Which version of a mobile website have you tried? Sound off in the comments below.

The need for this site stemmed from feedback from 3M sales reps. The reps didn’t want to continue to carry around heavy laptops to just show a couple of videos, so 3M provided iPads to accomplish this feat. Rare Method was involved in the execution and design and we provided a solution to their problem.

We knew the site would have a fixed height and width since this was only going to be on the iPad and not used anywhere else. We coded up the site and embedded the videos using the HTML5 <video> tag. There were advantages to this but also disadvantages. If the rep was in a spot with shady WiFi or typical AT&T coverage, then the videos would load slowly.

We also built other pages the reps could use in their sales pitch as well as a contact form that the client could fill out if they were interested.

In my previous post I talked about what I have been doing to my desktop the last little while. I had quite a few email or IM me asking about how the GeekTool scripts I used. Just take these scripts and copy the lines you want into the command area of a Geeklet. Most of these were written by Mac Newbold. Enjoy!

CPU Usage

top -n1 -l1 | grep "Load Avg" | sed 's/.*usage: //; s/ user.*//;'
top -n1 -l1 | grep "Load Avg" | sed 's/.*user, //; s/ sys.*//;'
top -n1 -l1 | grep "Load Avg" | sed 's/.*sys, //; s/ idle.*//;'


Memory

top -n 1 -l 1 | grep PhysMem | sed 's/.* inactive, //; s/ used.*//;'
top -n 1 -l 1 | grep PhysMem | sed 's/.* used, //; s/ free.*//;'


Month

date +%B

Date

date +%d

Day

date +%A

Time

date +%I:%M

AM / PM

date +%p

Weather

curl --silent "http://xml.weather.yahoo.com/forecastrss?p=USUT0078&u=f" | grep -E '(Current Conditions:|F<BR)' | sed -e 's/Current Conditions://' -e 's/<br \/>//' -e 's/<b>//' -e 's/<\/b>//' -e 's/<BR \/>//' -e 's/<description>//' -e 's/<\/description>//'

Look for the ‘UT0078′ here and replace it with the city code you want to display. Get the city code by going to Yahoo Weather and searching for your city. Once found look in the url and you will see your city code at the end of the url.

Weather Image

Create a new Shell Geeklet and use this as the command:

curl --silent "http://weather.yahoo.com/forecast/USUT0078.html" | grep "forecast-icon" | sed "s/.*background\:url(\'\(.*\)\')\;\ _background.*/\1/" | xargs curl --silent -o /tmp/weather1.png\

Replace the city code with your city code. ( same steps to get city code as above )

Then create a new Image Geeklet and use this as the url:

file:///tmp/weather1.png

Not having a dock at all has taken some getting used to. I use Quicksilver for just about everything now. I do have a pull down docklike thing at the top middle in case I ever need it. Here is a list of tools I have used to create my new desktop.

CandyBar – Change all the folders icons and HD icons.
Magnifique – Change the folder and App nav areas to black
GeekTool – Add time, weather, and computer status to the desktop.

GeekTool was by far the most fun. You can do much more with it than what I have done here. If you come up with something good for you I’d love to see it.

To get this working on your mac open a terminal (/Applications/Utilities/Terminal) and then paste in this script and press enter. You will have to restart Finder to see your new and improved window.

defaults write com.apple.finder _FXShowPosixPathInTitle -bool YES