Posts Tagged ‘jquery’

iOS Web App Funkiness

Friday, September 28th, 2012

I ran into some interesting challenges while working on a site this week. Like any good developer, I ran to the web to search for a solution. However, I couldn’t find any solutions that addressed my specific problems. Both problems concerned differences in behavior between Safari and the bookmarked web app. One problem had to do with caching on both the iPad and iPhone, and the other had to do with a background display on the iPad.

The first problem turned out to be a caching issue, but it presented itself as a block of code that would not die. This particular site has a large background image that is removed if loaded on either on iPod or iPhone. The background of the site was being written into the DOM with jQuery originally, but I decided to reorganize the code for purposes of progressive enhancement. I modified the CSS, JavaScript, and HTML documents. I uploaded the documents to the server, refreshed the site in Safari, and everything worked as it should. I then clicked on the web app icon for the site, and only some of the changes showed. The content changed, but the background image from the desktop site was still showing. I quit the web app, force quit it from the iOS multitasking bar, deleted the web app, cleared Safari’s cache in Settings, reloaded the site in Safari, and re-added the web app to the home screen. I tried this several different ways in several different configurations. No changes. I even force restarted the iPhone before reloading the site. Nothing.

After some systematic problem-solving with the code, I was able to determine that the trouble maker was some cached JavaScript. It just would not go away. It turns out that adding some meaningless code to the end of your JavaScript include is all it takes to prevent the code from being cached. I changed my code to the below and, voila, magic.

<script type=”text/javascript” src=”js/code.js?1234″></script>

Then I brought out my iPad to check out the site there. Pulled up the site in Safari, and everything was beautiful. Launched the web app, and the background had disappeared. On the heels of the iPhone caching issue, I figured that I had another new caching problem (even though the other fix should have fixed it). After much problem-solving and searching I found an obscure Apple Knowledge Base article about the size of images allowed on iOS devices. My image was smaller than the limitations presented in the article, but it caused me to think about the size of the image. The image is around 1300px wide, and the div was sized to display it all. So, I started playing with the size of the div that had the background image. I reduced the size to 1024px, and it showed right up.

Here are the meta tags I have in the head that apply to the web app:

<meta name=”apple-mobile-web-app-capable” content=”yes” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />

 

Anyway, these behaviors were unusual, and they had me stumped. So, I thought I’d share. I hope it helps.

Aesthetics, Part 2

Friday, September 10th, 2010

In my last post I briefly addressed the importance of form and function and how they are really two parts of a unified whole. That whole has far more potential impact than either of the individual ingredients taken alone. You can have a very beautiful design, but, if the design doesn’t fulfill the necessary function, it has little impact. Likewise, if a design functions but has little aesthetic appeal, it’s effectiveness will be severely limited.

However, when given equal consideration, form and function have the ability to fulfill the functional objectives of a business and connect with customers on an emotional level. I ended with a couple basic questions. In this post we’ll address those dealing with our customers.

Why do businesses so frequently dismiss the role of aesthetics in their marketing efforts?

The simple answer to this question is money. Quality design requires time and experience, and that costs money. Make no mistake about it, anyone CAN build a website, but that is why most of them suck. It is impossible for people who do not have the benefit of experience or perspective to design and develop something that will be as effective or successful as the work of someone with experience. At the most, any success will be a matter of luck. What successful business owner leaves important considerations to chance?

More importantly, why do businesses accept this low level of quality; even demand it?

This is due to a combination of factors.

First, business owners and decision makers don’t know the difference between high and low quality design or the relative value of either. I have watched business owners stress for weeks over what copier they are going to lease, and I have watched the same business owners put their website in the hands of their nephew because he will do it for $200. Money may be tight, but that is not the only concern. The real issue is that they do not believe that a high quality product has any more value than a low quality product. One might be a little fancier or prettier than the other, but it’s not worth the difference in price.

That segues into the second factor: designers are not generally business people. Most of us have artistic backgrounds. Even worse, we have nerdy, artistic backgrounds. So, we can fluently discuss color theory, technology, usability, etc., but we cannot speak to how all of that translates into real value for our clients. Unless the client also has an artistic background (or a nerdy background), all they have to compare is price. Clients aren’t stupid, but they may be ignorant. It is the designer’s responsibility to help educate the customer and to help them make the informed decision. In the long run, both parties will be more successful because of it.