REBLOG=>SavySeph
Deciding on picture size is my next task in getting my website to be mobile friendly. In my previous blog on this topic, I figured that reducing the size of navigation menu is a good place to start to design a website to fit mobile device. I used single word for title and double word for subtitle. This seems to work out some of the problem. I figure the next step would be to have a universal width for all pictures. Ideally the picture could be stretch or shrunk to fit across the multiple platforms without losing too much picture quality.
Given the size of webpages, stretching and shrinking a picture is not the real problem. Pictures who are magnify twice or reduce by half are never too shabby when it comes to quality. This should be enough do the trick to fit an image into a website. The bigger concern is manipulated images sometimes take a longer time to load. The 4G phones are great for speed but as the best for the current technology they are a minority user. Most people would have the lower 3G speed on their phones. The loyalist to old phone will still surf with 2G and there are still a number of these mobile surfers out there. These people will favor sites who were sufficiently fast for their devices.
I went window shopping for mobile phones using google and decided that I have 3 categories to please. Based on their minimum screen width, I simply name them mini (80 pixels), midi (321 pixels) and maxi (481). After throwing some math around, I decided that all images on my website will be 240 pixels wide. Shrinking 240 to 80 (the lower end of the mini) is one-third reduction. This will likely cause some problem in loading speed. For the higher end of the mini (320 pixels), the image is stretch less than 50% which is acceptable. For the 481 pixels width, there is no stretching of image. The image with text displayed by the side will be at least half of the screen.
I now had all my pictures resize to 240 pixels width. Going through the pictures one by one had been a tedious exercise. Some of my image were name by their sizes. A cat image, for example, had been named cat330x250. The 330 represent the width and 250 is for the height. I still maintain the old name of the image. It would sound silly but once something is publish it is not advisable to make changes. Keeping the old name will ensure that people who link my pictures will not get a blank image. I actually have three manga pages outstanding. These three cartoons are at least 600 pixels wide. The task will be to break them down to smaller pictures who are 240 pixels wide. The main picture that will adopt the old name while new pictures will carry the old name with a sequential numbering suffix.
Going through image by image can also make you see things from a different angle. I redraw two images. I hope the people who had link the old pictures prefer the new pictures. I had also came up with 5 new pictures. These are for the pages which previously did not have a picture. The remaining task, unless new development crops up, I will drop the navigation menu for the mini users.
My Comments
Thanks for sharing. Designing a website for multiple platform involves a lot a details.
