However, I discovered a strange quirk on a site I am currently working on and how to work around it, so I thought I would detail my findings here.

The Problem

We are developing a new website in which the header and footer have background images that are wider than the actual content area. The images are also too wide to safely fit in the lowest common denominator browser window in a 1024x768 desktop. We therefore needed a container that fit to the window with the background image centered, a very reasonable solution commonly used in those cases.

In addition, for optimal performance we put all of the graphics into one giant sprite that was 1224x1660. I have created large sprites like that for other sites that mobile Safari has no problem scaling correctly (like my site, for example).  As such, something to do with the large size of the sprite and the fact that it was being placed into a container of 100% width must have thrown off mobile Safari's scaling calculations.

Here is a screenshot showing the broken scaling, with some red outlines and background applied to header elements to help highlight the issue:

It turns out the reason for this is a resource limit on the iPhone - the amount of memory an image can use once downloaded and opened. This same limit applies to mobile Safari on the iPod and iPad. Note that this limit is nothing to do with the file size. The maximum limit for images is 1024x1024x3 (3,145,728). If the width and height dimensions of your image multiplied together exceed this value, the image will be down sized. The result can vary depending on the viewport size (whether you're on an iPhone or an iPad).

There does, however, seem to be a bug whereby your image will get scaled if it's over 2 mega pixels, despite the fact that it should be fine so long as it's under 3,145,728. This is discussed in more detail over at Defusion.org.uk.

The Solution

To solve the problem you just have to find a way to reduce the dimensions of your image. In the case of this website, we split the large graphic sprite into two files. It may have also been possible to just take out some of the excess whitespace in the image file.

Having done this, mobile Safari scales the images correctly since both images are within the memory resource limit and are therefore not down-sized - just scaled with the rest of the site to fit the viewport. There is still some minor visual artifacting as a result (1px lines at the edges of some elements), but that's an expected result of the scaling and is seen in many other sites.

Here you can see the site now looking great on the iPhone:

There are many reasons (or are they excuses?) why our choices are limited, some we understand and some we don't. Either way we accept those limitations as reality. All of our choices are ultimately limited by the physical world that we live in. Some of us spend our lives seeking means to expand our choices and often meet with success. Others are lazy and just accept the limitations put in front of them. But all of us accept that there are ultimate barriers we can never breach, such as the laws of nature. I question whether those barriers really exist; if they are truly the edge of our reality beyond which no choices are available to us.

Is choice an illusion?

Our choices are ultimately limited because of our belief that nothing can or does exist beyond the barriers that limit our physical existence and that we can only exist within those barriers. Is this really the case?

Just for a moment I'd like to draw a parallel between our real world and the fantasy world of The Matrix. The reason humans in The Matrix, for the most part, could exist in a content state of ignorance was not because it was a precise replica of real life. That component was purely superficial. It was because the machines gave the humans a choice, if only on a sub-concsious level. They were under the impression that they actually had a choice and had made the one they desired, when in fact those who wanted to control them had arranged that choice such that it would be the only one they would make.

When we choose from a limited menu, are we really making a choice? Since somebody else has control over what is on the menu, the choice has actually been made for us already. Just because you choose the chicken over the fish doesn't mean you really made a choice. You just went with one of the choices that was already made for you. Next time you might pick the other. If you go to the same restaurant frequently and work your way through the menu you will utimately be left with no more choices to make. We make different choices every day and it would honestly be tough to make every possible choice you could make within one lifetime. Ultimately we repeat our choices over and over again and get ourselves trapped in a cycle of choices that others have already made for us.

By this logic, choice would seem to be an illusion. When we think we are making choices we are not. We are picking from choices that have already been made for us. Some of those choices are limited by nature. We accept the ultimate limitation of nature as out of our control. Or is it?

What's the real illusion?

The most powerful, rich and affluential people in the world still cannot choose from things that do not exist.  No amount of money can buy you something that simply does not exist and cannot be made from the resources available in our physical world. We cannot will things into existence or forcibly break the laws of nature (or so we would believe).

Do the choices presented to us exist because we believe no others can? Or because of some external power that controls/limits them?

Even if we have all the power, money and influence the world as we know it could offer us, we are still ultimately limited by nature. As far as we know we cannot simply float off the planet, fly through the air, or breath in outer space - not without some form of technology, at any rate. We accept this as fundamental truth, living our lives and accepting the choices we have based on this belief.

But is this really the case? Or do we believe this "truth" because we are taught to believe it. Or are we given a choice of whether or not to believe it but are really only allowed to make the choice everyone else has made?

Endless Possibilities

When we are new born babies we know absolutely nothing. Our minds are completely open and willing to accept anything we are taught. Before we learn to speak, everything we learn is through observation via all our 5 physical senses. We have to make up our own minds about everything with little to no understanding of what we are making up our minds about and no frame of reference for comparison. We accept everything our parents or guardians teach us and have no choice but to believe they must be teaching us the truth.

At a young age we are capable of accepting anything; we only accept what we are taught because we don't know any better. However, when we are very young we are far more imaginative than adults. We can think of and believe in ideas that adults find ludicrous and silly based on their understanding of reality - we're just silly children with over-active minds.

Yet I have heard stories of children who could do some crazy sounding things, but stopped because it scared the crap out of their parents who asked them to stop. I, for example, as a young child seemed to be able to read my mother's mind. Perhaps it was just some crazy intuition, but I would voice something she was thinking of doing before she did it, or start humming a tune she had been thinking of only in her mind. It scared her so I stopped doing it. I know of this because she told me. While she remains firmly grounded in physical reality, it certainly made her wonder if there are at least greater possibilities for the human mind.

So if we were not taught about the limitations of "reality", would they really exist? Do they only exist because of our belief in their existence? Could we, in fact, make any choice we wanted to, even if it defied the known physical nature of our universe, if only we were not taught about physical limitations and things that are "impossible"?

I believe, as I'm sure many others do, that the human brain has far greater abilities than we realize and maybe that's all we're missing out on. Perhaps developing those abilities would have no affect on our physical reality. Or perhaps they would help us realize the truth of our reality and that in fact the only limitations are the ones we believe in.

Food for Thought

I will leave that with you, and encourage you to go out and rent or buy "What the Bleep do We Know" if questions of reality intrigue you. Also, go watch The Matrix, if you haven't already. It can really make you think about the idea of choice and the real difference between reality and illusion.

Remember, our brains do not know the difference between dreams and reality. Only when we wake up do we realize our dreams were not the same as what we experience when we are awake. But maybe our waking life is the dream and dreams are in fact reality...

What the Bleep Do We Know Trailer/Intro

I therefore wanted to take a minute to chat about form vs function, what works for web and what doesn't, to help give designers ideas on how they can improve their web designs.

Things to Consider

• Above and Below the "Fold"
  The "fold" refers to the bottom of the browser window. Anything below the fold requires scrolling to see. Users will tend not to scroll down for more unless something above the fold catches their interest. It is important, therefore, to ensure that all the most important content is above the fold. It could be visual, but it must present the user with some sort of call to action or a reason to find out what's belowe the fold.
  
  
• Buttons and Links
  Operating systems have established standards that define how buttons and links should appear to make them clear and obvious as something you can click on. Buttons must look clickable - like bubbled out a bit and clearly outlined. Links should be a different colour and usually underlined to indicate their interactivity. The web allows us to make buttons and links look like anything we want, making it easy to break the convention of the operating system users are used to. It's okay to break the conventions of the operating system to suit the design, so long as you follow some basic rules to ensure that your links and buttons are clearly interactive elements.
  
  
• Visual Elements
  The human brain is mostly visual. We can interperet and understand an image far more quickly than we can text - any good designer knows this. However, users come to websites for information and not to look at pretty, gratuitous visual displays - except in cases where your company and your website are all about that.  It is therefore important to ensure that visual elements convey information the user will be interested in. Any visual elements that don't accomplish that should be kept minimal and out of the way. You don't need a banner that takes up 3/4 of a smaller browser window. You can keep your logo and brand banner small and out of the way while still conveying your brand identity througout the site by using colours and fonts effectively.
  
  A simple rule of thumb to follow when considering visual elements is if they do not add anything to the user experience and are not necessary to convey part of the client's brand identity, you probably don't need them.
• Functional Elements
  Most websites these days provide application-like functionality, whether it be for use by the public users or for the client only to manage their content. It is important to consider the elements that will be required to provide this functionality when coming up with a design. Most often the best thing to do is to leave a nice big content space and provide guidelines for the colours and styles that should be used for the text, links and functional buttons and form elements. I find that a space with a pale or white content area makes it the easiest to incorporate functional elements. Those elements can then easily be tweaked, if needed, so their styles match the colours and branding elements in the rest of the site.
  
  
• Text
  As much as visual elements can be a far more powerful tool than text for conveying information, text is still king of the web. A good design leaves plenty of space for content while ensuring optimal line length for readability. Text is also important to search engines for helping users find the website. There are many creative ways in which text content can be made more visually appealing, especially on landing pages such as the home page. When thinking of visual elements, consider where text can be used, taking into account colours, fonts and styles that can be applied without using graphics. CSS is a powerful language and can be used to present text in very effective ways.

Examples

• Apple
  Apple's website is focused on information about their products and services. Customers go to their site to learn about those things and want to get to that information as quickly as possible. Apple's website is pretty effective at accomplishing that for these reasons:
  • Very visual home page that conveys a simple but effective message to the user about the latest product they are promoting
  • Subtle but consistent brand identity throughout the site
  • Minimal graphics/visuals, effective use of CSS to maintain consistent styling and branding throughout
  • Clear and obvious navigation elements, easy to get around and find what you need
• PayPal
  PayPal's website is primarily an online payment application, but also provides all the information users need about their products and services. While some pages can be a bit on the busy side, it is a good, effective site for these reasons:
  • Minimal graphics and visual effects used only where they are effective
  • Logo/branding minimal yet strong and effectively conveyed throughout the site
  • Good use of body space makes it easy to incorporate the functionality of their payment application
  • Clear and simple navigation elements
• Bush League DJs
  This website is focused more on giving the user a cool experience and expressing their personality than in providing information. It does a decent job of presenting their music and has received compliments from many users, but is not the most effective for these reasons:
  • Heavy use of visuals, very prominent brand logo reducing available space for content
  • Prominent Flash gadget for playing music - cool and fun, but takes away from content
  • Small space for content with very visually busy background and surroundings, making it harder to focus on reading text information.
  • Visual elements and limited space made it difficult to incorporate content management functionality for the client
  • Simple navigation elements and presented in the form of physical knobs but sometimes blend too well with the visuals making it harder for some users to realize they are interactive
• I Care NWT
  This website is focused on providing information about recycling programs in the Northwest Territories. It consists of a fair bit of text content as well as visual elements that present information. This is an effective design for these reasons:
  • Branding and logo is prominent yet does not take up too much vertical space
  • Colours are clean, navigation is simple, obvious and keeps out of the way of content
  • Suitable content space that allows comfortable line length for optimal readability and plenty of space for large visual elements used to communicate information
  • Content on home page is clearly chunked and easy to spot
  • Design made it very easy to incorporate content management features for the client that are easy to see and use and never cramped for space.

I will update this list as I complete more projects or find other sites that offer both good and bad examples.

But this one just sucks!  Not only can it not manage to run reliably, but:

• It's configuration database gets corrupted if you configure it from Safari
• It craps out if you try to configure certain things using remote access to the configuration (outside your home/office network)
• When it craps out, you have to factory reset and restore the firmware and your configuration
• D-Link uses a tech support call center in India with people who can't speak or understand English very well, are obviously used to dealing with clueless lay people and are just plain rude. Plus they won't admit when the router actually has a problem, it must be your network or your computer (of course, how could I have been so stupid???)

Bottom line is just don't buy one of these.

I haven't had the greatest luck with other routers in recent years, either.  I used to know that I could rely on Linksys (now owned by Cisco) to be solid and always just work.  But they've been going down hill and have gotten even worse since they were bought out by Cisco.  They don't implement wi-fi standards properly most of the time (mainly Wireless-N) and they just in general don't work well for all the things you want to do.

There are so few companies these days that will make a good quality product without cutting corners.  This is due to the drive for lower prices and consumers who mostly have no clue about the real value of the electronic products they buy other than the advertised features they can measure it by.  You compare a bunch of products, they all advertise a list of features, so you make your decision based on which features you need and who can offers those features for the lowest price.  The time and effort (or lack thereof) that was put into making the thing is pretty much irrelevant to you even though it's going to make the biggest difference to your experience with the product.

Everyone is now aiming to include the most features for the least money, resulting in a large number of choices and no consistency in quality, even between one model of a single brand and the next. Quality is sacrificed to push out more for less to consumers who mostly don't have the expertise to really have any idea of where the real value in the products lie. They can only go by a list of features compared to prices amongst a bunch of different brands and models.

Apple is one of the only companies left in the electronics and computer industry who doesn't sacrifice quality and is will to charge the price for it.  Yes, Steve Jobs is a cut-throat business man who's looking to make as much profit as he can, but so is every other company out there.  He just does it differently and people don't like it very much.  But the Apple Airport Extreme base station router is by far the best for home users.  You'll pay considerably more for it than equivalent routers from other brands, but what you will get is something that works reliably 95% of the time right of the box with minimal hassle.  Not only that but they give you a really nice and user-friendly configuration program to go with it, not some cruddy and confusing web interface full of a lot of technical terms for the most basic configuration options.

At this point I have no idea what sort of router is good for business use, particularly on a Mac network, but will post a comment here when we've found one that's good and solid.

Apple has a number of reasons for not supporting Flash on their mobile devices. To me, as a web developer, the most important one is for the purpose of getting away from the need for a proprietary plugin just to do simple things that can be accomplished using open standards.  I am fully behind Apple's decision not to support it and will gladly avoid using Flash unless it is absolutely necessary or really is the most appropriate solution for the job.

Why do I prefer Open Standards over Flash?

For the past couple of years I've been advocating open standards over Flash because most of the things you might use Flash for can be accomplished using the existing open standards supported by all the major web browsers - including Internet Explorer 6 (may it rest in piece). Basically Flash is just unecessary most of the time.

Most websites with Flash commonly use it for one or more of the following purposes:

• Gratuitous visual effects and nifty navigation systems
• Slideshows of photos or combinations of image and text content
• Fancy menus and rollover effects
• Interactive maps (for selecting a location, for example)
• Video or audio playback
• Interactive game

First of all, gratuitous visual effects are completely useless. They almost never add anything useful to the user experience - as in they don't make it easier for the user to access the content they want.  If anything they distract from the content.  98% of the time users want a site to load quickly and be able to find what they are looking for in the shortest possible time.

Sometimes they go to a site for entertainment - to listen to music, watch a video or play a game. In those cases Flash is a useful and necessary tool - at least until the new HTML5 open standard is complete and supported by all web browsers.

But other than games, audio and video, all of the other items I listed above can be accomplished without Flash using current web standards available in all the current major web browsers on desktops, laptops and the majority of smart phones and other Internet-enabled mobile devices.  If you MUST have gratuitous visual effects on your site, many can be accomplished with open standards too.

I'm not going to get into the details of why Flash is bad and why open standards are better because there's a few dozen articles around the intertubes already covering those topics and all the gory details about Apple vs. Adobe.  Just do a google search for "apple vs adobe flash".

My main point is just that Flash should not be necessary, is mostly unecessary now and with new standards does not need to be necessary in the future.  That is not to say that it doesn't have it's place for certain things.  Just that it doesn't need to be a standard on the web.

You don't need Flash to play hundreds of free games on your Apple mobile devices - you can get tons from the app store FOR FREE. You don't need Flash to watch video on your iPhone - the websites hosting them just need to support the phone so they can play back the source video file in the built-in video player.

I advocate open standards and want to see them prevail over Flash - and Silverlite and other equivalents, basically the need for proprietary plugins. That way I know that the websites I develop will work on the widest range of devices for the majority of users.