One of my pet hates (there are many), is being presented with the incorrect keyboard, or having auto capitalisation forced upon me, when entering information into web forms on my iPhone or iPad. This is something that’s very easy to control and can be done so with a little sprinkle of HTML5. You don’t even have to worry about old browsers - I’ve tested this to work perfectly well even in IE6.
For this next step I’m going to explore practical uses for phpThumb() within ExpressionEngine.
Since writing Part 1 of this I’ve added a gallery feature to this site that allows photos or images to be uploaded with each blog post. These appear as small thumbnails in rows under each post and are integrated with a JS lightbox script so they can be clicked on to view at a larger size. This functionality will form the basis for the following post.
OK, so I should probably clarify the rather misleading title with “for web use”.
I frequently have to ask for photos or images at a certain size, and because I’m one of those web types I use pixels as my measurement of choice. Invariably one of the first questions I get asked is “What DPI?”. When I explain that the DPI doesn’t matter for the web I get looked at like I’m from another planet. So for those that are already thinking I’m a little green man, let me show you an example.
One of the things that is most often misunderstood and feared by end users is the manipulation of images for website use. There are addons available for ExpressionEngine to help with this, allowing the end user to upload virtually any size of image and have it resized automatically to suit. The huge advantage of this kind of method of working with files is that should the design of the website change there’s no need to go back and resize a load of images, a simple parameter change and it’s all done.
I’ve used these addons on and off for sites I’ve developed over the years, but quite often I’ve hit various limitations such as the need to create rounded corners, or cropping images to the top rather than the centre. What I’ve continually fallen back on is an extremely useful collection of scripts called phpThumb() which I’ve always managed to crowbar into doing what I’ve needed.
I’ve been using ExpressEngine from Ellislab for some time now, in fact it’s the basis for every web job I do these days, and tonight the family got a new arrival; MojoMotor.
Priced at a give-away $49.95, it’s well worth a look for those simple websites that don’t require the power and depth of ExpressEngine.
When viewing websites on the iPhone it will auto adjust font sizes at will to improve readability - this can be especially useful when switching from landscape to portrait, for example.
However, on certain web layouts this can cause problems and may result in an undesired layout.
To prevent this, simply add the following to any element in your CSS:
-webkit-text-size-adjust:none;
Safari will now no longer auto adjust the font size.
Something worth remembering when signing off the finishing touches to a website is to create the Apple Touch Icon. This is the icon that shows on your iPhone, iPod Touch or iPad home screen if you chose that option when bookmarking a website.
Up until now I’ve always created these as a 59x59px PNG (named “apple-touch-icon.png” and placed in the web root), however on the iPhone 4 and to a certain extent the iPad, these always looked fuzzy and low res.
The fix is quite simple - create the same file at 129x129px and Bob’s your uncle!
From Tumbled Logic:
And so we’re beginning to arrive at a situation where Flash authors are, for the first time, confronted with a situation where Flash isn’t in a position of unanimous support: the proportion of users without Flash support is growing, and it’s growing quite quickly. From a business perspective, there is a tipping point at which you have to make a decision, based on the numbers.
Well worth a read.