With the internet continuing to grow more and more portable, it is becoming increasingly important for website owners to ensure that their mobile web design will be visible on the much smaller screens of these devices. The pixel resolution of standard computer and laptop screen (1680 by 1024) is completely unsuitable for smart phones and tablets, so what is appropriate?
.webp)
Fluid versus Static Layout
The first step in the process is to determine whether your website needs a set pixel resolution at all; using percentages, you can create a ‘fluid’ layout that will re-size itself depending on the size of the screen it is being viewed on. A web design that is 4 columns wide on a standard screen, for example, might be three columns wide on an iPad, two columns on a tablet and one column on a smart phone.
If you have opted for a static layout, meaning that you have a different website for each type of device, then you will need to take into account that different mobile phones will have different screen sizes. At the moment, the current standard across all of these devices is 240 by 320 pixel resolution.
Many in the mobile web design industry have found that the best way to determine the most appropriate pixel size for all devices is to use a grid system that will provide perfect calculations for each element. A layout of 1080 pixels, for example, could be divided up with 739 pixels on the left for a blog, 311 pixels on the right for a sidebar and a 10 pixel margin. The result is perfect balance and symmetry.
