Images - Tips and Tricks
This Tutorial focuses on what can be achieved by adding imagery into Sitetaga.
1. Animated GIF Slideshow
Although many designers consider the Animated GIF just to be associated with bad clip art, when it comes to the mobile web it is in fact an extremely useful format which offers a chance to breath life into a site. Crucially, the animated GIF is a widely supported format, allowing for basic animation where Flash might run poorly or more likely not at all.
This example shows an animated GIF looping 5 images at 3 secs. The GIF was created in Adobe Photoshop with the Diffusion Dither added (this helps to stop colour banding).
If you don't have access to GIF creating software there are plenty of easy to use online alternatives such as makeagif.com
2. Text and Image
Another way to embellish a site is to use text on your image as shown in this example below. This then can then become a 'point of sale' or a 'call to action'.
Text and Image scaled
Here's the image scaled down to 176px wide, the smallest (common) screen size. As with Header Images, be aware of how the text might appear on smaller handsets: it may not be legible.
Top: This is the image at it's original size, 300px (pixels) wide.
Middle: Scaled down to fit a 240px wide screen.
Bottom: Scaled down to fit a 176px wide screen.
See this example in a live site.
3. Stacking Images
Although Sitetaga only allows you to attach one image per site that doesn't stop you from uploading one long/large image that contains several different photographs or illustrations as is shown here.
3x Images in one
This image is made up of three different photographs each separated by a small margin.
See this example in a live site.
Margin Area
It's a good idea to keep the margins transparent - so there's no colour clash with the background behind.
4. Multiple Images
This is similar to the last example - but rather than just stacking them vertically a more creative layout has been applied. A good way to present a sample portfolio perhaps?
Creative Layout
Sitetaga allows you to upload images up to 1600px high, although the image here is just 550px high. If you wish to work on large strips like these, the best size to work to is 300px wide by 600px high.
In terms of file size, it's best to aim for 120kb or lower - this image is well under that at just 37kb.
Be aware that when saving animated GIFs your file size may well be higher as you are dealing with extra frames.
