Posts Tagged: web design


2
Aug 10

Now comes in .com flavor

Some time ago, I was emailed by a gentleman who wanted to sell me the .com version of this domain.  This guy was with a group called Flex Media.  He sent me a link to click on if I was interested.  Suspicious of fraud, I copied the URL and pasted in a browser that I never login to any other services in.  I was sent to a page where I could make an offer.  I offered $30.

About 4 days go by and I’m thinking they laughed at my offer.  But then I got an email back from him.  This time instead of asking for an offer, he is offering the domain @ $205.  This is a hobbyest site.  I do not make any money from it at all.  I could not justify this much money for a new domain, so I replied back offering $30 again.

The very next day I get another email from him.  This time the offer has been “temporally reduced” to the low low price of $155.  This email notes that he is also open to “reasonable offers”.  So, I reply back offering $30 again.

The next day I get another email from him.  This time he pulled some strings and was able to offer the domain to me for the price of $105.  He noted this time that this was his final offer.  So I replied back offering $30 again.

I don’t hear back for a couple days, then I get a new email from him.  This time he wants to know why I have not bought the domain that I showed interest in.  I replied back in a very briefly “Because you did not accept my $30 offer.”.  The next day I had the final email from him “We will accept your offer, just go here to purchase the domain”.  Then there was another one of those one-time URLs.  I clicked on it and it was a page allowing me to purchase it for $30.

So, I bought it and waited the 6 weeks required before transferring the domain.  Transfered it to my normal registrar and here it is.  For here on out, the site will default to the .com flavor.  However, the old links will still work.  Just goes to show that sometimes, you just have to stick to your guns.

Cheers,
Jonathan


17
Jul 10

An easy hack to sharpen images on iPhone 4

I recently released my first web app ported to the iPhone and Android devices. Only a couple days after deploying it, I found out about the increased DPI on the new iPhones.

Once I got my own iPhone 4 to test with, I noticed a huge problem with my web app. The images all looked pixelated against the beautiful text on the display. Not wanting to redo the CSS and header to define a larger viewport, I started to look for better solutions.

I decided to put larger images into the page than the tags were coded for. This way, the images would be resized smaller for the iPhone gen 1, 2, and 3. But for the iPhone 4, it would “zoom” the image to native resolution.

  1. Figure out the ratio that you need to increase all your images by.  This is the formula that I used… (960 / (viewport width)) * (image dimension).  My viewport was set to 320px and my image was 280px, so my equation looked like this:  (960/320)*280.  So, I created new images that were 840px wide.
  2. Since I already had my image tags defined with the appropriate height and width, I just saved the larger images as the same file names.
  3. Success.

This turned out really great, the iPhone does a fantastic job at scaling images, so it looks great on the older iPhones and looks fantastic on the new ones.  Check out the demo.

How to find the viewport on your web app.

<meta name=”viewport” content=”user-scalable=no, width=320” />

If you are using “device-width” as the viewport width, assume 320.
<meta name=”viewport” content=”user-scalable=no, width=device-width” />

A CSS based alternative solution

The folks at sitepoint suggest a CSS alternative that I believe is probably better if you are still in the development phase of your project.  Razor-sharp Images in Mobile Safari on iPhone 4

The only flaw I see in their solution is formula that they use to calculate image size.  Their double the size method does not accommodate for horizontal mode on the phones.

Old iPhone, before hack

Old iPhone, after hack

iPhone 4, before hack

iPhone 4, after hack