Information architecture document specifies various sizes of images that need to be used in various pages. The dimensions are fixed to complement the look and feel of the site, based on the the importance of image in that page and on the relative importance of the article the image supports. However, In a standard, 3 level page structures with Home, Section and Article levels, progressively larger dimensions are used. Example, Thumbs are used in the home page, while slightly larger image size is used in the section level and the largest is used in the article level page.
Now when each section of the site addresses different target audience and their tastes and purposes of visit, it is very reasonable that the importance of image, in relation with the write up along with it, will vary. This is where the project team faces the greatest challenge. If the project team does not define the image sizes at the level of IA itself, they are heading for big trouble at the technical development stage. This is especially true when certain sections are cross promoted and showcased. But defining the size of the image is not enough.
Project team should try and keep an aspect ratio for the images. When i started off my career, it was difficult for me to understand the term aspect ratio and its relative importance. So i guess it would be great to refresh our understanding of the term again. Aspect ratio of an image is the ratio of the width of the image to its height, expressed as two numbers separated by a colon.
While fixing an aspect ratio, it should be ensured that images with smaller diamensions are displayed by trimming down the largest image along with the description or details used. If the largest image diamension is taken as the base size, there will be very little deformity to the image even if it is resized downwards.
Below are few reasons why aspect ratio is important at the early stages of planning a website:
Images can appear in multiple slots: In modern websites, an image can never be considered independently. It always has a relative existence. This is especially true when websites attempt cross selling. Example, Lets consider the website of a company concentrating on auspicious event management like wedding, funerals etc. Assume that there is a description of wedding service, it is natural that the marketing would want the floral arrangement services of the same company cross promoted in the same page. The company may also decide to cross sell all the relevant services in the same page. So the image that appears as part of the description will have to fit into a smaller showcase allotted for related services. If an aspect ratio is kept, the images will appear perfectly in any small slots.
Device usability: When the same content is delivered through different devices like PCs, laptops, mobile phones, TVs, e-readers, other handheld devices, and even on billboards, it is always safe to maintain an aspect ratio. Human interaction with these different devices are so different that it is always necessary to keep an aspect ratio where largest possible image can be downsized real time using a small program or script once the device is identified when the content rendering happens so that a user will not have go in search of the navigational links when the user reaches at the bottom of any article.
Bandwidth: When the bandwidth is low, it is always better to serve images with smaller size and dimension. This would give optimum user experience. Have you ever tried to access a mobile unoptimised website on your handheld device with a creeping GPRS connection? If you are in India, you may have faced the issue many times. The site will load partly and the user waits for ages to see even the header, let alone the body of the site.
Screen size: With different devices and platforms delivering content over different screen resolutions, keeping an aspect ratio allows users to access easily the content of their choice. Content that is rendered properly on a computer may not appear as decent on a mobile handset browser because of the smaller screen size.
Difference in the monitor resolutions: Even the difference in monitor resolution has significance. Other day i was trying to point out to one of websites readers the link to subscribe our print magazine. The link to subscription site is available on the right panel of the site. But the customer is unable to spot it. After verifying multiple possibilities with the customer, i realized that his monitor resolution was 800 x 600 and the banner appears only if the monitor resolution is 1024 x 768
If the aspect ratio is not insisted from the beginning, it is likely that some images may appear deformed due to shrinking or breaking while same image would appear perfect else where on the same site.
No comments:
Post a Comment