Great article–“Designing a Mobile App? Don’t Make These 10 Mistakes”

This is a great article on Mashable on things to consider in designing a mobile app:  http://mashable.com/2012/04/11/mobile-app-design-tips/

Their 10 points summarized are:

  1. Don’t Begin Wireframes or Designs Without a Flowmap
  2. Don’t Disregard the Development Budget
  3. Don’t Start With Low Resolutions & Avoid Bitmaps
  4. Don’t Undersize the Hit Area
  5. Don’t Gratuitously Use Intro Animations
  6. Don’t Leave Users Hanging
  7. Don’t Blindly Copy Style From Other Operating Systems
  8. Don’t Overstuff Pixel-Dense Screens
  9. Don’t Assume Everyone Will Use Your App The Same Way You Do
  10. Don’t Forget About Gestures, But Don’t Abuse Them Either
Advertisements

Testing multiple versions of multiple browsers

There are a lot of browsers out there – IE, Chrome, Firefox, Safari, Opera, etc. – and so many versions of each. That doesn’t even count all the mobile browsers.  So how do you make sure your website work across all the different versions? 

Options

You can install the latest version of each browser on your development machine, and that does help work out many of the cross-browser kinks.  But you can’t really install the older versions on your machine too.

Internet Explorer’s Dev Tools (just press F12 in IE 9) do give you a way to see your site in IE7 or IE8 mode.  And it’s pretty faithful, though I’ve read it does have some discrepancies, especially in the JavaScript engine.  And that only would solve the IE testing issues – not all the other devices.

When I searched for solutions, Adobe’s BrowserLab kept coming up.  It’s currently free so that’s a plus, but it only shows the layout of a page.  It doesn’t let you interact and actually test.  And it doesn’t support all the different browsers.

Spoon.net

Enter spoon.net.  This site is a public-facing, cloud-based application virtualization service.  You sign up, install a small browser plug-in, and then it runs applications looking like they are just part of your OS, but they are really just virtual windows.  It gives access to lots of open source apps, but it also gives access to lots of browser versions.  Just look at the list below.

spoon

You just click Run, wait a few moments if it’s the first time, and you have your browser to test in.  Here’s the Firefox 6 instance I launched (I have Firefox 9 installed on my desktop, so this is definitely the virtualized app):

spoon_firefox

They do offer a free tier that gives access to just one device simultaneously.  You are supposed to be able to us all open source and purchased apps with the free version, but I did find that when I tried to launch some browser versions with the free version it said I could only use it for 2 minutes per 24 hours.  I’m not sure why some versions are free and others are not.  But the cheapest pricing tier is just $8 per month (or $60 per year) and gives you 5 simultaneous devices, access to all apps, the ability to install other apps, and more storage.  Quite reasonable.

Caveats:  They only have a Windows version of the plugin and they don’t have virtualized Mac or Linux instances.

It doesn’t solve the dilemma of how to test on the plethora of mobile devices out there, but this definitely simplifies testing all the desktop PC browsers!

Autoscale, center an image with overlaid elements

The Problem

I recently had an interesting web layout problem.  I needed show a picture in the center of an area on the screen.  That’s normally pretty easy, but I also had a few extra requirements:

  1. The image should expand proportionately to cover as much of the stage as possible.
  2. The image should not scale any larger than a given size.
  3. I needed to overlay elements on top of the image (a hotspot in my case) that scales proportionately and retains the same relative location.

At first glance the answer would be to use some absolute or relative positioning and use a background-image with the background-size:cover (at least in modern browsers).  I did need to support IE7, which hurt that approach, but the requirement to overlay an element and scale it was also an issue.  When using background-size:cover, the element isn’t forced to stay proportional, just the image maintains proportions.  I needed to keep the actual element proportional too or I wouldn’t know where to put the overlaid element.

The Layout Approach

The answer does require some JavaScript, but CSS can get us halfway.  Here is the layout we need:

layout

HTML

So let’s set up the HTML (we won’t worry about the footer – just leave space for it:

<div id="stage"> <div id="imageHolder"> <img src="SomeImage.jpg" />

<div id="hotspot"></div> </div> </div>

CSS

The approach in CSS is to get the stage filling its area using absolute positioning. 

#stage { position:absolute; top:0px; bottom:38px; right:0px; left:0px; padding:0; background-color:Black; }

The imageHolder is also set to use absolute positioning and has its max-width and max-height set to the size/proportion we want, but the actual positioning will be done in JavaScript.

#imageHolder {
    position:absolute;
    max-height:720px;
    max-width:920px;     
}

And the image and placeholder are setup for absolute positioning.  The image is styled to fill the stage, and the hotspot is styled using percentages for position and size so that it will scale with the image:

#imageHolder img { position:absolute; top:0px; left:0px; min-height:100%; width:100%; height:auto; } #imageHolder #hotspot { position:absolute; cursor:pointer;

top:22.1%;

left:50.5%;

width:44%;height:42.3% }

JavaScript

We create a resize function that will recompute how big the imageHolder should be and where it should be placed.

function resize() {
    //Get stage size (less any desired padding)
    var stage = $('#stage');
    var div = $('#imageHolder');
    var newHeight = stage.height() - 10;
    var newWidth = stage.width() - 10;
    

    //Constrain to proportioon
    var proportion = parseInt(div.css('max-height')) / parseInt(div.css('max-width'));
    if (newWidth > newHeight / proportion) {
        newWidth = newHeight / proportion;
    }
    if (newHeight > newWidth * proportion) {
        newHeight = newWidth * proportion;
    }

    //Set the height and width -- the max-height/width will contrain this
    div.width(newWidth);
    div.height(newHeight);

    //Center it
    div.css({
        "left": (stage.width() - div.width()) / 2 + "px",
        "top": (stage.height() - div.height()) / 2 + "px"
    });
}

And then when we load the page we just need to call the resize function and setup the window’s resize event to call it as well.

$(document).ready(function () { $(window).resize(function () { resize(); });

 

resize(); });

See it in Action

You can see this in action on JSFiddle at http://jsfiddle.net/tYY87/  (I just made a few changes there for the smaller screen size.)

Quick, Free way to show PDFs in a page flip book

I’ve been building a Silverlight page turn application at work and just stumbled across this neat little service.  It allows you to upload a PDF file and have it display in a flippable book.  You have to use their interface as-is so it’s a bit limited, but it’s free and they host it so it’s a quick and easy way to spice up a PDF on your web site or application.

www.youblisher.com

10 Golden Principles of Successful Web Apps

This is a presentation from Fred Wilson, a tech investor who has had a lot to do with a lot of web applications.  His 10 principles are:

  1. Speed
  2. Instant Utility
  3. Software is Media
  4. Less is More
  5. Make it Programmable
  6. Make it Personal
  7. RESTful
  8. Discoverability
  9. Clean
  10. Playful

The video and the transcript are available here:  http://carsonified.com/blog/business/fred-wilsons-10-golden-principles-of-successful-web-apps/