<small>Often there is a greater variation in screen and window sizes of users device. One of the most common issue visitors face when browsing a website via their various devices is that the website layout goes out of the device, due to which the user has to scroll horizontally and vertically to read the contents. To avoid this, the best <a href="http://www.vijaywebsolutions.com" target="_blank">web solution is to create a layout that is flexible and can adapt to the user’s needs and wishes.</small>
Avoid making a website with fixed layout
To create a website with flexible width is using the alternatives fluid (liquid) or elastic (flexible) layout. Both have their pros and cons.
A liquid layout, is the column widths in percentage to adjust to the browser window width. The advantage is that the user does not have a horizontal scroll bar. The disadvantages are that the extremely narrow window allows columns to overlap, and that the wide window gives too long lines of text that are hard to read.
An elastic layout uses the “em” unit for gap widths, which means that the layout adapts to the browser’s text size. If the user changes the text size, it will also change the maximum row length, making the text consists of the same number of characters regardless of font size. The advantage is the control of line length. The downside is that a narrow window or large text provides a horizontal scroll bar.
The best solution for most websites is usually a hybrid, in which some columns are elastic (width in em) and some liquid (width in percent). CSS properties for the maximum and minimum width makes it possible to avoid both overlapping as for long lines.
With media queries (“media queries” in CSS3), it is possible to better customize the layout of the space available, for example by using a different number of columns depending on the window width. This technique is often used for <a title="Responsive Web Designs" href="http://www.vijaywebsolutions.com/responsive-web-designs-designing-for-the-future-web/" target="_blank">responsive design.
It may seem tempting to use statistical software to your users’ requirements. Then know that these programs usually only reports the size of the screen, which is not the same as the browser window size. The conditions also varies over time. Statistics for other sites are virtually useless as visitor profiles differ.
Example of Media Queries
Our website (www.vijaywebsolutions.com) uses media queries to create a layout that works in web browsers, mobile phones and tablets.
The following image shows an examples of media queries to customize the layout.
Check layout in different browsers, in large and small windows, on different platforms (desktop, laptop, mini laptop, smartphone, cell phone, etc.) and verify that the content does not overlap or become totally or partially inaccessible.
You may also experiment with different settings for font size (or zoom, depending on the features the browser offers). Many browsers make it possible to change sized base text or to put a minimum size allowed. Some users have a text that is 30 pixels or more. It is best practice to implement media queries in <a href="http://www.vijaywebsolutions.com" target="_blank">web development as the number of smartphone users are increasing rapidly.